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

Answer 2

我会说

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

Answer 3

我想你想要这个代码。

下拉菜单始终显示项目。你点击一个项目，隐藏它。

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

这里是fiddle

Answer 4

您可以将事件绑定到li本身，并在单击时隐藏它：

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

这是Fiddle Demo。

如果您想使用课程，可以这样做：

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

以下是使用该课程的Fiddle Demo。

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

4 个答案: