클릭하면 열기 및 닫기 하위 메뉴가 표시됩니다. Jquery

jquery (클라이언트가 대신 마우스를 올려 놓으려는 경우)에 클릭 이벤트가있는 하위 메뉴가 표시되므로 작업 할 수있는 기본 메뉴가 있지만 여전히 한 가지를 알아낼 수 없습니다. : 나는 메뉴와 하위 메뉴가 제대로 작동하도록했습니다. 그래서 "뉴스"를 클릭하면 하위 메뉴가 미끄러 져 내려 가고 "뉴스"를 클릭하면 닫힙니다. 그러나 뉴스 '하위 메뉴를 열고 나서 "자원"을 클릭하면 다시 닫힙니다. 각 하위 메뉴가 나타나지만 뉴스 '하위 메뉴가 열려있는 상태에서 다른 메뉴 항목을 클릭하거나 주 메뉴 영역 외부에서 아이디어를 클릭 할 때 이전 하위 메뉴를 닫으시겠습니까? 여기에 내가 가진 무엇 :클릭하면 열기 및 닫기 하위 메뉴가 표시됩니다. Jquery

<ul id="MainMenu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li> 
       <a href="#">News</a> 
       <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul>       
     </li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Admin</a></li> 
     <li> 
      <a href="#">Resources</a> 
      <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul> 
     </li> 
     <li class="lastChild"><a href="#">New Button</a></li> 
    </ul>

및 JQuery와 :

$(function(){ 
$('#MainMenu').find('> li').click(function(){ 
    $(this).find('ul') 
    .stop(true, true).slideToggle(400); 
    return false;  
});  
});

출처

2012-11-13 Joxmar

그냥 코드에이 줄을 추가이

$(function() { 
    $('#MainMenu > li').click(function(e) { // limit click to children of mainmenue 
     var $el = $('ul',this); // element to toggle 
     $('#MainMenu > li > ul').not($el).slideUp(); // slide up other elements 
     $el.stop(true, true).slideToggle(400); // toggle element 
     return false; 
    }); 
    $('#MainMenu > li > ul > li').click(function(e) { 
     e.stopPropagation(); // stop events from bubbling from sub menu clicks 
    }); 
});

http://jsfiddle.net/Ssu32/

출처

2012-11-13 16:17:39

! 그러나 페이지의 다른 부분을 클릭하면 하위 메뉴가 닫히지 않습니다. – Joxmar

당신이 문제를 해결할 수 있도록 예제를 만들 수 있습니까? 문제가 무엇인지 추측 할 수 있습니다. 귀하의 body/html을 클릭하여 바인딩하고 요소를 슬라이드시켜야한다고 생각하겠습니다 –

이 방법이 효과가 있습니까? http://jsfiddle.net/joxmar/m4Nwe/ – Joxmar

같은 시도를

전체 코드

$('#MainMenu').find('> li').click(function() { 
    $('#MainMenu > li').not(this).find('ul').slideUp(); 
    $(this).find('ul').stop(true, true).slideToggle(400); 
    return false; 
});

작동 Check Fiddle

출처

2012-11-13 16:50:07

덕분에이 또한 작동합니다. – Joxmar

클릭하면 열기 및 닫기 하위 메뉴가 표시됩니다. Jquery

답변

관련 문제