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

嘿Brenden，我为你找到了一个很好的解决方案:) 你的问题有点棘手......

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

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

希望以后可以帮助你解决问题。

如果您有任何问题请在评论中提问：）

http://jsfiddle.net/jjyss/＆lt; - 这是一个现场演示

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

在jQuery中切换多个下拉菜单

3 个答案: