ユーザーがアイテムをクリックした後にドロップダウンメニューを非表示にする方法は？

Question

私は次のコードを使用して、ブートストラップ使用してドロップダウンメニューを作成しました：

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples </a><ul class="dropdown-menu" id="examples"> 
     <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li> 
     <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li> 
    </ul> 
    </li> 

はしかし、私は、メニュー項目のいずれかをユーザーがクリックした後、ドロップダウンメニューを非表示に問題を抱えています。私は、次のコードを与え、jQueryのを使用して試してみました：

$("#atlas").click(function(){ 
    $("#examples").show(); 
}) 

をそれは（、最終的にそれを隠すために二度目をその所望のアクションを実行するのは初めて）を2回押してメニュー項目をクリックして私を必要とします。

Answer 1

私は

$('.example').click(function(){ $('#examples').hide(); }); 

Answer 2

を言うあなたは、Li自分自身にあなたのイベントをバインドし、クリックされたときにそれを隠すことができます：ここでは

$('ul li').click(function() { 
    $(this).hide(); 
}); 

はFiddle Demoです。

クラスを使用する場合は、あなたが行うことができます：ここでは

$('.example').click(function() { 
    $(this).hide(); 
}); 

クラスを使用してFiddle Demoです。

Answer 3

私はあなたがこのコードをしたいと思う。

ドロップダウンメニューには常に項目が表示されます。アイテムをクリックして非表示にします。

$('.example').on('click', function (event) { 
    event.stopPropagation(); 
    $(this).hide(); 
}); 

ここではこれを改善するために行われますが、主にあなただけの要素がクリックされたときに、メニューの非表示を呼び出す必要がありますすることができたくさんありますfiddle

Answer 4

です。 Here is a codepenが動作しています。ただ

// show/hide the menu when examples is clicked 
$(".dropdown-toggle").on("click", function() { 
    $(".dropdown-menu").toggle(); 
}); 

// hide the menu when an exmple is clicked 
$(".example").on("click", function(){ 
    $(".dropdown-menu").hide(); 
});