2017-09-15 6 views
-1

の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を使用しても問題は解決しませんでした。

どうすればこの問題を解決できますか?

+1

[mcve] **をリンクしていない**の質問に入れてください。また、書式設定のヘルプ(コードのようにコードをマークアップするような主要なものを入力していたときに、質問の隣に書かれた**オレンジの**書式設定**ボックスがありました)を参照してください。 –

答えて

2

.find()を間違って使用していました。また、JQueryライブラリはJSFiddleには含まれていませんでした。

注:最初に矢印はfa-angle-downの代わりにfa-angle-upである必要があります。

前:

$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up'); 

後:

$(this).find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up'); 

JSFiddle Demo

$(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>

+0

@ T.J.Crowderフィードバックいただきありがとうございます。 –

+0

@ T.J.Crowder次の質問からは、Sorry! –

+1

@ T.J.Crowderそれは終わった! –

関連する問題