他のLIアイテムのクリック時にドロップダウンキャレットを変更します。

Question

ウェブサイトを作成していて、ドロップダウンにいくつかのキャレットが付いています。

私はそうのようにサイドバーがあります。私は少しキャレットのアイコンをvへ>からなり、そのようなドロップダウンコンテンツを展開するメニュー項目をクリックすると

Home 
Menu item > 
Menu item 2 > 
Menu item 3 > 

を：

Home 
Menu item v 
    Sub-menu item 
    Sub-menu item 2 
Menu item 2 > 
Menu item 3 > 

場合私はメニュー項目vをクリックします - キャレットはvから再び>に行きます。例えばしかし

、私はメニュー項目2をクリックした場合>、メニュー項目2は開きますが、メニュー項目のキャレットはそうのようなVとしてとどまる：私はそれがとてもメニュー項目を取得するにはどうすればよい

Home 
Menu item v 
Menu item 2 v 
    Sub-menu item 
    Sub-menu item 2 
Menu item 3 > 

図2に示すように、メニュー項目vはメニュー項目に戻って変更されます、クリックされた>

私は私のJSとしてこれを持って

私のドロップがダウン、次のようになります

$('.dropdown').click(function(){ 
    $(this).find('.nav-arrow').toggleClass('fa-angle-left fa-angle-down'); 
}); 

$('.dropdown').click(function(){ 
    $('.collapse').collapse('hide'); 
}) 

：

H青梅

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item<i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 2 <i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 3 <i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

Answer 1

何をする必要が最初の左向きのキャレットに<li>要素のすべてを変換した後、裏面のみターゲット要素を変更します。さ残念ながら開いており、これが閉じているキャレット知るために何も（簡単な）方法はありませんように、それが明示的にそれらを変更するのが最善です：

$('.dropdown').click(function(){ 
    $('.nav-arrow').removeClass('fa-angle-down'); 
    $('.nav-arrow').removeClass('fa-angle-left'); 
    $(this).find('.nav-arrow').removeClass('fa-angle-left'); 
    $(this).find('.nav-arrow').addClass('fa-angle-down'); 
}); 

・ホープこのことができます！

Answer 2

私は、これはあなたが開いたり閉じたり、メニューを切り替えていると、メニュー内の別のエントリを選択してメニューを切り替えた場合はケースを処理すると思います。

jQuery(".dropdown").click(function(event){ 
    // Evaluate the target of the click event was already opened. 
    if(jQuery(event.target).hasClass("fa-angle-down")){ 
    // Change the caret to looks like they are closed. 
    jQuery(event.target).removeClass("fa-angle-down").addClass("fa-angle-left"); 

    // Evaluate the target of click event was not opened. 
    }else{ 
    // Remove any opened menu items carets. 
    jQuery(".dropdown.fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-left"); 
    // Add the appropriate caret to the newly opened menu item. 
    jQuery(event.target).removeClass("fa-angle-left").addClass("fa-angle-down"); 
    } 
}); 

ご不明な点がある場合や、改善して改善することができるかどうかを教えてください。編集の少しで