のdivが展開されたときに、私は矢を切り替えるしようとしていますが、ページ上のdivが表示に設定されているロード、単純なjQueryのexpandable divは矢印を変更する必要がありますか?
$(document).ready(function() {
$('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
// var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
if ($(showElementDescription).is(':visible')) {
showElementDescription.hide("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
showElementDescription.show("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});
.expandableCollapsibleDiv i {
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
padding-left: 10px;
float: right;
}
.expandableCollapsibleDiv ul {
border-bottom: 1px solid white;
clear: both;
list-style: outside none none;
margin: 0;
padding-bottom: 10px;
display: none;
/* visibility: hidden;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>NEW YORK</a></h3>
<ul>
<li><a>Albany</a></li>
<li><a>Buffalo</a></li>
<li><a>Kingston</a></li>
<li><a>Tonawanda</a></li>
<li><a>Sherrill</a></li>
<li><a>Sherrill</a></li>
<li><a>Oneida</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>CALIFORNIA</a></h3>
<ul>
<li><a>Alameda</a></li>
<li><a>Bell</a></li>
<li><a>Banning</a></li>
<li><a>Campbell</a></li>
<li><a>Fresno</a></li>
<li><a>Galt</a></li>
<li><a>Jackson</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>WASHINGTON</a></h3>
<ul>
<li><a>Asotin</a></li>
<li><a>Bellingham</a></li>
<li><a>Bothell</a></li>
<li><a>Camas</a></li>
<li><a>Clarkston</a></li>
<li><a>Cheney</a></li>
<li><a>Newport</a></li>
</ul>
</div>
</div>
問題参照:なし、可視CSSで設定されていません。矢印はそれほど反応しません。私はdivが展開されていないとき(隠れている)、divが展開されている(目に見える)ときにポイントするように矢印が好きです。 div:ページ上のスペースを使用しているため、visible:hiddenを使用しても問題は解決しませんでした。
どうすればこの問題を解決できますか?
[mcve] **をリンクしていない**の質問に入れてください。また、書式設定のヘルプ(コードのようにコードをマークアップするような主要なものを入力していたときに、質問の隣に書かれた**オレンジの**書式設定**ボックスがありました)を参照してください。 –