jQuery 如何使用jquery关闭一个bootstrap下拉菜单

在本文中，我们将介绍如何使用jQuery来关闭一个bootstrap下拉菜单。bootstrap是一个非常受欢迎的前端框架，它提供了一系列的界面组件，包括下拉菜单。下拉菜单是一个经常使用的界面元素，它可以在用户点击或悬停时展示一个菜单选项。

要关闭一个bootstrap下拉菜单，我们需要使用jquery的.click()方法。该方法可以将一个事件处理程序绑定到一个元素的点击事件上。通过检测点击事件，我们可以在用户点击菜单选项之外的任意地方时关闭下拉菜单。

下面是一个示例代码，演示如何使用jquery关闭一个bootstrap下拉菜单：

<!DOCTYPE html>
<html>
<head>
  <title>关闭bootstrap下拉菜单</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
    <a class="dropdown-item" href="#">菜单项3</a>
  </div>
</div>

<script>
 $(document).click(function(event) { var target =$ (event.target);
  if (!target.closest('.dropdown').length) {
    $('.dropdown-menu').removeClass('show');
  }
});
</script>

</body>
</html>

在上面的示例中，我们通过给document对象绑定一个click事件处理程序，检测到点击事件后，首先获取到事件的目标元素，然后检查该目标元素是否位于.dropdown元素内。如果不是，则移除.dropdown-menu的show类，从而关闭下拉菜单。

通过以上示例代码，我们可以在用户点击下拉菜单之外的地方时关闭bootstrap下拉菜单。

阅读更多：jQuery 教程