极客教程Bootstrap下拉菜单点击时关闭的处理方法
参考： Bootstrap dropdown closing when clicked in HTML
Bootstrap是一个非常流行的前端框架，它提供了许多便捷的CSS类和JavaScript插件，用于快速开发响应式和移动优先的网页。其中，下拉菜单（Dropdown）是一个常用的组件，它允许用户通过点击或悬停来显示一个可选择的列表。然而，在某些情况下，我们可能希望在点击下拉菜单中的某个项时不关闭菜单，以便用户可以进行多项选择。本文将详细介绍如何实现这一功能。
基本的Bootstrap下拉菜单
首先，让我们回顾一下如何创建一个基本的Bootstrap下拉菜单。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Dropdown Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://how2html.com">Action</a>
<a class="dropdown-item" href="https://how2html.com">Another action</a>
<a class="dropdown-item" href="https://how2html.com">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Output:
在上面的代码中，我们使用了Bootstrap的dropdown类来创建一个下拉菜单，并通过data-toggle="dropdown"属性来触发下拉功能。点击按钮时，下拉菜单会展开，显示三个链接项。
阻止下拉菜单在点击时关闭
要实现点击下拉菜单项时不关闭菜单的功能，我们需要使用JavaScript来阻止下拉菜单的默认关闭行为。以下是一个实现这一功能的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Dropdown Stay Open Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="https://how2html.com">Action</a>
<a class="dropdown-item" href="https://how2html.com">Another action</a>
<a class="dropdown-item" href="https://how2html.com">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu').on('click', function(e) {
e.stopPropagation();
});
});
</script>
</body>
</html>
Output:
在这个示例中，我们通过jQuery的.on('click', function(e) { e.stopPropagation(); });来阻止点击事件冒泡，从而阻止下拉菜单在点击时自动关闭。这样，用户就可以在下拉菜单中进行多项选择而不会被中断。
使用JavaScript控制下拉菜单的显示和隐藏
除了阻止下拉菜单在点击时关闭外，我们还可以使用JavaScript来手动控制下拉菜单的显示和隐藏。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Manual Control Dropdown Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuManual" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuManual">
<a class="dropdown-item" href="https://how2html.com">Action</a>
<a class="dropdown-item" href="https://how2html.com">Another action</a>
<a class="dropdown-item" href="https://how2html.com">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
(document).ready(function(){('#dropdownMenuManual').on('click', function(e) {
(this).next('.dropdown-menu').toggle();
e.stopPropagation();
});(document).on('click', function(e) {
if (!(e.target).closest('.dropdown').length) {('.dropdown-menu').hide();
}
});
});
</script>
</body>
</html>
Output:
在这个示例中，我们首先通过$('#dropdownMenuManual').on('click', function(e) { $(this).next('.dropdown-menu').toggle(); e.stopPropagation(); });来控制点击按钮时下拉菜单的显示和隐藏。然后，我们通过$(document).on('click', function(e) { if (!$(e.target).closest('.dropdown').length) { $('.dropdown-menu').hide(); } });来实现点击下拉菜单外部时关闭下拉菜单的功能。这样，我们就可以更灵活地控制下拉菜单的行为了。
结论
通过上述方法，我们可以实现在Bootstrap下拉菜单中点击时不关闭菜单的功能，以及使用JavaScript手动控制下拉菜单的显示和隐藏。这些技巧可以帮助我们创建更加灵活和用户友好的网页界面。