更改dropdown插入點擊其他LI項目

我正在創建一個網站，並在我的下拉列表中插入一些插入符號時遇到問題。更改dropdown插入點擊其他LI項目

我有一個側邊欄，如下所示：

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

當我點擊小尖號圖標從>變爲V和擴大下拉內容，像這樣的菜單項：

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>

來源

2017-02-15 Blake

你需要做的是先轉換什麼的<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'); 
});

希望這有助於！

來源

2017-02-15 01:38:48

隨着編輯一點點這個工作：。 '$（ '下拉 '）點擊（函數（）{ $（'。導航箭頭 '）removeClass（' FA-角度下'）（'.fla-angle'）; $（this）.find（'。nav-arrow'）。addClass（'fa-angle' ''; $（this）.find（'。nav-arrow'）。addClass（'fa-angle-left'）; $（'。collapse'）。collapse（'hide'）; } ）;' 感謝您的幫助！ – Blake

我認爲這將處理您已經切換菜單打開和關閉以及是否通過在菜單中選擇另一個條目來切換菜單的情況。

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"); 
    } 
});

讓我知道如果您有任何問題，或者如果我可以改善這一點，使它對你更好。

來源

2017-02-15 02:00:19

更改dropdown插入點擊其他LI項目

回答

相關問題