Javascript 在jQuery中切换多个下拉菜单

我有一套菜单，当用户点击选项栏时，我想打开/关闭它（类似于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")
    }
})

---

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

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

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

---

嘿，布伦登，我有一个很好的解决方案给你：） 你的问题有点棘手

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

//JS-jQuery
$（函数（）{
$（“#moving.list h1”）。单击（函数（）{//仅识别列表中的单击标题
$（this）.next（）.toggle（）；//获取ul并切换
if（$（'.list ul:visible'）.length>1）{//reset all（如果打开了多个）
$（'.list ul:visible'）.hide（）；//全部隐藏
$（this）.next（）.show（）；//现在只显示所需的列表
}
}); 
});
//HTML
嗨，我是第一个

Foo1
Bar1

嗨，我是第二

食物2
Bar2

这将是我解决你问题的办法。 这有点不同，因为在列表项（

）中使用无序列表（
）不是一个好的做法。
所以我给每个元素一个标题（
）和一个容器（
）

希望这能帮助你解决将来的问题

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

试试这个

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>

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

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