ドロップダウンリストが表示されているボタンの外側をクリックしているときに、ドロップダウンリストを非表示にする方法は？

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要素