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