드롭 다운이 표시되는 버튼 바깥 쪽을 클릭 할 때 드롭 다운 목록을 숨기는 방법은 무엇입니까?

Question

내가 부트 스트랩 드롭 다운 목록을 사용하고 있지만 내가 jQuery를 사용하고 있지 않다 언제 .. 내 코드가 여기

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">User Name<span class="caret"></span></button> 
<ul class="dropdown-menu"> 
    <li><a href="#">Profile</a></li> 
    <li><a href="#">Logout</a></li> 
</ul> 

$('.dropdown-toggle').click(function() { 
$('.dropdown-menu').slideToggle(); 
}); 

입니다 거기에 내 자신의 jQuery를 부착 한 드롭 다운 몸의 아무 곳 (버튼 외부를 클릭에 숨겨진되고있다). 그러나 slideToggle 함수를 사용하면 숨기고 있지 않습니다. slideToggle() 드롭 다운을 숨기는 기능과 동일한 효과를 원합니다.

Answer 1

내가 바로 당신을 이해하면 버튼 또는 드롭 다운을 제외하고 (몸의 아무 곳이나 클릭하면 원하는 통해 클릭의 전파 가능한 관찰을 줄일 수

...click(function(e){ 
e.stopPropagation(); 
... 
}); 

시도) slideUp으로 다시 드롭 다운합니다. 아래 코드를 사용할 수 있습니다./:

날이

이 조각 또는 바이올린 참조>jsfiddle

$('.dropdown-toggle').click(function() { 
 
     $('.dropdown-menu').slideToggle(); 
 
}); 
 
$(document).mouseup(function (e) 
 
{ 
 

 
    if (!$(".dropdown-menu").is(e.target) && 
 
     !$(".dropdown-toggle").is(e.target) && 
 
     $(".dropdown-menu").has(e.target).length === 0 && 
 
     $(".dropdown-toggle").has(e.target).length === 0) 
 
    { 
 
     $(".dropdown-menu").slideUp() 
 
    } 
 
});

section { 
 
\t position:relative 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<section> 
 
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">User Name<span class="caret"></span></button> 
 
<ul class="dropdown-menu"> 
 
    <li><a href="#">Profile</a></li> 
 
    <li><a href="#">Logout</a></li> 
 
</ul> 
 
</section>

[? 내가 요소 외부의 클릭을 감지 않는 방법]의

Answer 2

이 계층화 된 HTML 요소