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