在HTML中点击时关闭Bootstrap下拉菜单

Bootstrap下拉菜单

Bootstrap是一个流行的HTML、CSS、JavaScript库，用于构建响应式和移动优先的网站。它提供很多组件，其中之一是下拉菜单。Bootstrap下拉菜单让用户可以从几个选项中选择一个或多个选项。下拉菜单由一个触发器元素和一个下拉列表组成。

触发器元素可以是一个按钮、一个链接或一个输入框。用户单击或悬停在触发器元素上时，下拉列表会显示出来。

关闭Bootstrap下拉菜单

使用JavaScript

当用户单击外部区域时，Bootstrap下拉菜单会自动关闭。但有时候我们需要手动关闭它，例如当用户单击下拉菜单列表中的某个选项时，该选项应该被选中并且下拉菜单应该关闭。

以下是一些使用JavaScript关闭Bootstrap下拉菜单的方法：

<!-- HTML代码 -->
<div class="dropdown">
  <button class="btn 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="#" onclick="closeDropdown()">选项1</a>
    <a class="dropdown-item" href="#" onclick="closeDropdown()">选项2</a>
    <a class="dropdown-item" href="#" onclick="closeDropdown()">选项3</a>
  </div>
</div>
<!-- JavaScript代码 -->
<script>
function closeDropdown() {
  var dropdown = document.querySelector('.dropdown');
  dropdown.classList.remove('show');
}
</script>

以上代码中，onclick属性绑定了一个JavaScript函数closeDropdown()。用户单击下拉菜单列表中的任意选项时，该函数会通过操作DOM关闭下拉菜单，它通过选择器'.dropdown'选取下拉菜单元素，然后移除.show类。

使用jQuery

使用jQuery关闭Bootstrap下拉菜单更加容易。您只需要使用hide()方法或removeClass()方法，它们都可以让下拉菜单消失。

以下是使用jQuery关闭Bootstrap下拉菜单的方法：

<!-- HTML代码 -->
<div class="dropdown">
  <button class="btn 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="#" id="option1">选项1</a>
    <a class="dropdown-item" href="#" id="option2">选项2</a>
    <a class="dropdown-item" href="#" id="option3">选项3</a>
  </div>
</div>
<!-- jQuery代码 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#option1').click(function(){
        $('.dropdown-menu').hide();
    });
    $('#option2').click(function(){
        $('.dropdown-menu').removeClass('show');
    });
    $('#option3').click(function(){
        $('.dropdown-menu').hide();
    });
});
</script>

在以上代码中，我们使用了jQuery选择器$('.dropdown-menu')选取下拉菜单元素，并在每个选项$('#option1')、$('#option2')和$('#option3')上绑定了一个click()事件，当用户单击它们时，它们会使用hide()方法或removeClass()方法关闭下拉菜单。

结论

在本文中，我们讨论了关闭Bootstrap下拉菜单的两种方法：使用JavaScript和使用jQuery。无论您选择哪种方法，它们都非常简单易懂，并且可以在您的网站中轻松实现。