javascript - 如何在用户单击某个项目后隐藏下拉菜单？

Question

我使用 Bootstrap 创建了一个下拉菜单，代码如下:

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