Question

我正在创建一个网站，但在我的下拉列表中遇到了一些问题。

我有一个像这样的侧边栏：

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

当我点击菜单项时，小插入符号图标来自＆gt; v并扩展下拉内容，如下所示：

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

如果我点击菜单项v - 插入符号从v转到＆gt;再次哪个是正确的。

但是，如果我点击菜单项2＆gt;例如，菜单项2打开，但菜单项上的插入符保持为v，如下所示：

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

如何点击菜单项2，菜单项v将更改回菜单项＆gt;

我有这个作为我的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>

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

如果您有任何问题或者我是否可以改进这一点以便让您更好，请告诉我。

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

2 个答案: