Jquery : 메뉴 바깥 쪽을 클릭하면 메뉴가 사라지지 않습니다.

Question

jquery를 처음 사용하고 있으며 '더보기'버튼을 만들기 위해 Google의 코드를보고 있습니다. 나는 그것이 작동하지만, 드롭 다운을 사라지게하는 유일한 방법은 'More'버튼을 다시 클릭하는 것이다. 드롭 다운 메뉴 자체의 외부에있는 모든 클릭이 그것을 닫을 수 있도록 변경할 수있는 방법이 있습니까? 통찰력에 감사드립니다!

http://jsfiddle.net/rKaPN/1/

Answer 1

바인딩 클릭 이벤트는 클릭이 이루어 캡처 HTML, 그것은

$("html").click(function() { 
    menu.find('.active').removeClass('active'); 
}); 

그런 다음 사용하여 메뉴의 click 이벤트에 그를 오버라이드 (override) 메뉴를 숨길 수 있도록하는 .stopPropagation();

menu.find('ul li > a').bind('click', function (event) { 
    event.stopPropagation(); 

피들 : http://jsfiddle.net/rKaPN/12/

Answer 2

메뉴를 열 때 창의 너비와 높이가 같은 투명한 오버레이 div를 만듭니다. 해당 div를 클릭하면 메뉴가 닫히고 div가 삭제됩니다.

Answer 3

당신도이를 추가 할 수 있으므로 사용자는 당신이 만드는 특정 메뉴 항목에 흐림 이벤트를 바인딩 할 수있는 모든이의 HTML DOM 요소를 클릭 테스트보다 오히려

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');}) 

Answer 4

을 클릭 할 필요가 없습니다 흐림 이벤트가 발생하면 활성화되어 있습니다. 이들과

//displaying the drop down menu 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 

:이 몇 줄의 교체 각 때마다 불필요한 작업을 많이 할 것 이쪽을 클릭에 있기 때문에,

//displaying the drop down menu 
    $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    $(this).blur(function() { 
     $('.active').removeClass('active'); 
    });