在jQuery中切换多个下拉菜单

Question

我有一组菜单，当用户点击选项栏（类似于移动/标记电子邮件的Gmail中的栏）时，我想要打开/关闭这些菜单。

当用户点击一个按钮时，出现菜单。当用户点击另一个按钮时，前一个菜单消失并出现新的菜单。这与以下代码一起工作。然而，不起作用的是，如果用户点击一个按钮，然后点击相同的按钮，菜单不会消失。

我明白为什么它不起作用，但不知道如何解决它。我认为我需要添加“如果打开的菜单是您点击的那个，关闭它并且不打开其他任何东西。”但是我试过的if语句没有这样做。

$("#moving ul li").click(function() { 
    // If the button clicked has the "active" class (meaning the menu is already open) 
    if ($("#moving ul li.active") == this) { 
     // Close the menu (removing the visible class) and make the button no longer active 
     $(this).toggleClass("active") 
     $(this).children("ul").toggleClass("visible") 
    // Otherwise ... 
    } else { 
     // Find the open one and close it 
     $("#moving ul li.active").toggleClass("active") 
     $("#moving ul li ul.visible").toggleClass("visible") 
     // Open this menu 
     $(this).toggleClass("active") 
     $(this).children("ul").toggleClass("visible") 
    } 
}) 

Answer 1

它不工作，因为你的if语句永远不会匹配。

“this”不是jQuery对象，它是实际的DOM节点。该声明应该是：

if($(this).hasClass('active')){ 

Answer 2

嘿布兰登·，我要给你一个很好的解决方案:) 你的问题是有点棘手...

// JS - jQuery 
$(function() { 

    $("#moving .list h1").click(function() { // only recognize the click on headlines in lists 

     $(this).next().toggle(); // get the ul and toggle 

     if($('.list ul:visible').length > 1) { // reset all if there is more than one opened 
      $('.list ul:visible').hide(); // hide all 
      $(this).next().show(); // now show only the list you want 
     } 
    }); 
}); 

// HTML 
<div id="moving"> 
    <div class="list"> 
     <h1>Hi im first</h1> 
     <ul> 
      <li>Foo1</li> 
      <li>Bar1</li> 
     </ul> 
    </div> 
    <div class="list"> 
     <h1>Hi im second</h1> 
     <ul> 
      <li>Foo2</li> 
      <li>Bar2</li> 
     </ul> 
    </div> 
</div> 

这将是我送给你的问题的解决方案。 它有点不同，因为在列表项（<li>）中使用无序列表（<ul>）并不是一个好习惯。 所以我给每个元素一个标题（<h1>）和一个容器（<div id="list">）。

希望可以帮助你解决未来的问题。

如果在评论:)

http://jsfiddle.net/jjyss/ <任何问题问 - 那是你

Answer 3

的现场演示试试这个

HTML

<ul class="nav"> 
    <li> 
     <a href="#">Main 1</a> 
     <a class='trigger'><div></div></a> 
     <ul> 
      <li> 
      <a href="#">sub1</a> 
      <a class='trigger'><div></div></a> 
       <ul> 
        <li> 
         <a href="#">subsub1</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

</ul> 

CSS代码

<style> 
.nav li{list-style:none;display:block} 
.nav > li ul{display:none} 
.nav a.trigger{display:block;float:right;margin-      right:2px;width:20px;height:20px} 
.nav a.minus > div{background:url(minus.png);} 
.nav a.plus > div{background:url(plus.png);} 
</style> 

Jquery代码

$(".nav a.trigger").addClass("plus"); 
$(".nav a.trigger").click(function(){ 
    var ul = $(this).parent().children("ul"); 
    if($(this).siblings('ul').is(":hidden")){ 
     $(this).siblings('ul').slideDown(); 
     $(this).addClass("minus"); 
     $(this).removeClass("plus"); 
    }else{ 
     $(this).siblings('ul').slideUp(); 
     $(this).addClass("plus"); 
     $(this).removeClass("minus"); 
    } 
     $(this).parent().siblings('li').find("ul:visible").slideUp().siblings('a.trigger').addClass("plus"); 
     $(this).parent().siblings('li').find("ul:visible").slideUp().siblings('a.trigger').addClass("minus"); 
    $(this).siblings('ul').find("ul:visible").slideUp().siblings('a.trigger').addClass("plus"); 
    $(this).siblings('ul').find("ul:visible").slideUp().siblings('a.trigger').removeClass("minus"); 
});