更改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项目

回答

相关问题