用戶單擊項目后如何隱藏下拉菜單？

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();
})  

但它需要我兩次單擊菜單項（第一次執行其所需的操作，第二次最終將其隱藏）。

Answer 1

可以做很多事情來改善這一點，但是主要是您只需要在單擊元素時在菜單上調用hide即可。 這是一個工作的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(); 
});

Answer 2

我會說

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

Answer 3

我想您要這段代碼。

下拉菜單始終顯示項目。 您單擊一個項目，將其隱藏。

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

這是一個小提琴

Answer 4

您可以將事件綁定到li本身，並在單擊時將其隱藏：

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

這是一個小提琴演示 。

如果要使用類，可以執行以下操作：

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

這是使用該類的小提琴演示 。