单击其他 LI 项更改下拉插入符号答案

【问题标题】：Change dropdown caret on click of other LI item单击其他 LI 项更改下拉插入符号
【发布时间】：2017-02-15 01:28:42
【问题描述】：

我正在创建一个网站，但在我的下拉列表中出现了一些插入符号问题。

我有一个这样的侧边栏：

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

我的下拉菜单如下所示：

首页

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

【问题讨论】：

标签： javascript jquery html dropdown

【解决方案1】：

您需要做的是首先将 all 的 <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');
});

希望这会有所帮助！

【讨论】：

稍微编辑一下就可以了：$('.dropdown').click(function(){ $('.nav-arrow').removeClass('fa-angle-down'); $(this).find('.nav-arrow').removeClass('fa-angle-left'); $(this).find('.nav-arrow').addClass('fa-angle-down'); $(this).find('.nav-arrow').addClass('fa-angle-left'); $('.collapse').collapse('hide'); });感谢您的帮助！

【解决方案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");
  }
});

如果您有任何问题，或者我是否可以对此进行改进，以便更好地为您服务，请告诉我。

【讨论】：