'body'jquery 이벤트를 올바르게 처리하여 드롭 다운을 닫는 방법

드롭 다운 대시 보드와 매우 유사한 드롭 다운을 만들려고합니다. 여기서 사용자 이름을 클릭하면 플라이 아웃 메뉴가 나타납니다. 사용자 이름을 다시 클릭하면 플라이 아웃이 닫힙니다 (클릭 할 때마다 토글 됨).'body'jquery 이벤트를 올바르게 처리하여 드롭 다운을 닫는 방법

한 가지주의 할 점은 플라이 아웃에있는을 제외한 아무 곳이나 클릭하면 이 닫히는 것입니다.

지금까지 거의 100 % 작동하지는 않았습니다. 실제 'body'요소를 직접 클릭하면 플라이 아웃이 닫힙니다. 이 말은 내 웹 사이트에 페이지의 전체 높이를 차지하지 않는 .wrapper 요소가 있음을 의미합니다. 실제 요소가 덮여 있지 않은 아래쪽에 얇은 줄이 그려져 있고 <body> 태그 만 있습니다. .wrapper 또는 다른 요소가 공백 (100 % 너비 보이지 않는 래퍼조차도)을 차지하는 모든 장소에서 요소가있는 곳 (본문 외에)을 클릭하면 창이 닫히지 않습니다.

// FLYOUT menu $flyout = $('.flyout ul'), flyoutDuration = 120; $('.flyout h3 a').click(function(e) { e.preventDefault(); $flyout.fadeToggle(flyoutDuration); }); $(document).on('click',function(e) { if ($(e.target).parents($flyout).length === 0) { $flyout.fadeOut(flyoutDuration); } });

HTML 예상되는 동작은 당신이 .flyout의 하위 창을 닫도록 밤은 클릭 모든 요소를해야

<body> <div class="blackbar"> <div class="container clearfix"> <a href="/"><div class="icon logo"></div></a> <div class="flyout"> <h3> Welcome back, <a href="#">username</a> </h3> <div class="menu"> <ul> <li><a href="#"><div class="users"></div>Users</a></li> <li><a href="#"><div class="groups"></div>Groups</a></li> <li><a href="#"><div class="configuration"></div>Configuration</a></li> <li><a href="#"><div class="logout"></div>Logout</a></li> </ul> </div> </div> </div> </div> <div class="wrapper"> <! -- content here --> </div> </body>

(등 .blackbar, 로고, 포함 : 자바 스크립트

)

출처

2012-11-05 Tallboy

당신이 선택에 랩퍼를 추가하려고 했나 :'$ (문서) .add ('래퍼를.' – adeneo

주사위 없음, 작동하지 않음 – Tallboy

정직하게 말하면 - 내가 이와 같은 것을하고있을 때 "박스"내부의 클릭이 요소를 닫는 것을 원하지 않을 때 - 나는 클릭으로부터 거품을 방지합니다. 링.

// FLYOUT menu 
$flyout = $('.flyout ul'), 
flyoutDuration = 120; 

$('.flyout h3 a').click(function(e) { 
    e.preventDefault(); 
    $flyout.fadeToggle(flyoutDuration); 
}); 

$('.flyout').click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 

$(document).on('click',function(e) { 
    if(flyout-open) { 
     $flyout.fadeOut(flyoutDuration); 
    } 
});

출처

2012-11-05 19:56:40 Dan

당신은 슈퍼 스타입니다. 정확히 내가 무엇을 찾고 있었습니까? – Tallboy

하나의 사소한 문제 -이게 그렇게 보입니다. 더 이상 플라이 아웃 메뉴의 실제 링크를 클릭 할 수 없습니다 (나는 그 trigging preventDefault를 믿습니다. 메뉴는 그대로 유지되고 링크는 따라 가지 않습니다. 내가 추가해야 할 것이 있는지 아십니까? – Tallboy

nevermind, 방금 두 번째 preventDefault를 삭제하고 완벽하게 작동했습니다. 다시 한 번 감사드립니다. – Tallboy

JQuery와 메뉴를 클릭 - 그가에 즉 어디서든 차 링크 또는 외부 링크를 클릭하면 어디서나 몸에 클릭에 내 경우에는 메뉴를

을 닫습니다 난의 드롭 다운 메뉴를 닫 원 HTML/몸

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){ 

    var divObj = $(this).next(); 
    var nstyle = divObj.css("display"); 

    if(nstyle == "none"){ 
     divObj.slideDown(false,function(){ 
      $("html").bind("click",function(){ 
       divObj.slideUp(); 
       $("html").unbind("click"); 
      }); 
     }); 
    } 
}; 

$(".clickme").click(toggleClick);

출처

2014-03-03 09:00:20

'body'jquery 이벤트를 올바르게 처리하여 드롭 다운을 닫는 방법

답변

관련 문제