Bootstrap dropdown阻止在主体单击时进行切换？
Bootstrap dropdown是一个常用的前端组件，用于创建下拉菜单。当用户点击页面其他区域时，通常会自动关闭下拉菜单。然而，有时候我们希望在主体区域点击时不关闭下拉菜单，只有在点击下拉菜单本身或其他特定元素时才关闭。
要实现这个功能，可以使用事件委托和事件冒泡的原理。具体步骤如下：
- 给主体区域添加一个点击事件监听器。
- 在事件处理函数中，判断点击的元素是否为下拉菜单或下拉菜单内的元素。如果是，则不进行任何操作；如果不是，则关闭下拉菜单。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Dropdown</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu {
display: none;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<script>
$(document).on('click', function(e) {
var target = $(e.target);
if (!target.is('.dropdown-toggle') && !target.parents().is('.dropdown')) {
$('.dropdown-menu').hide();
}
});
</script>
</body>
</html>在上述代码中，我们使用了jQuery库和Bootstrap的CSS和JS文件。通过给document对象添加点击事件监听器，我们可以在点击页面任意区域时触发事件处理函数。在事件处理函数中，我们判断点击的元素是否为.dropdown-toggle或.dropdown的子元素，如果不是，则隐藏.dropdown-menu。
这样，当用户在主体区域点击时，下拉菜单不会关闭，只有在点击其他区域时才会关闭。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云负载均衡（CLB）。腾讯云云服务器提供了可靠的计算能力，适用于各种应用场景。腾讯云负载均衡可以将流量分发到多台云服务器上，提高应用的可用性和负载能力。
腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm
腾讯云负载均衡产品介绍链接地址：https://cloud.tencent.com/product/clb
相关·内容
0回答
Bootstrap dropdown阻止在主体单击时进行切换？
jquery、twitter-bootstrap、dropdown
我有这个菜单，我的问题是，我需要它的行为，以便它只在单击父菜单项时切换。现在，您可以通过单击身体上的某个位置来关闭下拉列表，这不是我想要的行为。只有在单击父菜单项时，下拉菜单才会关闭。有可能吗？title="" class="active-trail dropdown-toggle nolink" data-target="#" data-toggle="d
浏览 3提问于2017-06-14得票数 2
回答已采纳
1回答
如何将boostrap下拉菜单与angular.js集成
javascript、angularjs
我想使下拉与输入功能与引导风格和angular.js如何将jQuery函数与angular.js集成{"routes"："routes"}app.directive('customepicker return { replace: true,
template: '<select class=
浏览 2提问于2016-03-10得票数 0
1回答
为什么我的body上的事件在特定元素上的事件之前被调用？
javascript、events、zurb-foundation-5
我在使用Foundation 5.5.3的项目中有以下代码 var $carsDropdown = $("#cars-dropdown");
但是当我点击使用基础代码打开和关闭下拉菜单的元素时，什么也没有发生。控制台输出如下：就像我点击.btn-close一样。
浏览 5提问于2017-06-05得票数 1
5回答
Bootstrap dropdown(‘切换’)方法不起作用
twitter-bootstrap
我想用dropdown(' toggle ')方法切换一个bootstrap dropdown，但它不会切换下拉菜单(第一次单击时打开，再次单击时不关闭)。我只想通过dropdown(‘切换’)方法来做。我使用了以下代码：$(function(){
$(".dropdown-toggle").click(fu
浏览 0提问于2013-07-15得票数 2
1回答
将单击事件添加到Bootstrap下拉切换时的奇怪行为
javascript、twitter-bootstrap
我有一个带有以下标记的Bootstrap下拉按钮： <a class="btn dropdown-toggle" data-togglea.dropdown-toggle时，Bootstrap的javascript通过将类open添加到div.btn-group来切换ul.dropdown-menu的可见性，这一切都很好。当我将自己的javas
浏览 1提问于2014-03-25得票数 0
回答已采纳
1回答
如何使用输入字段作为bootstrap 4下拉菜单的切换
twitter-bootstrap、dropdown
我的问题是的一个变体现在，在编辑控件中单击，首先触发focusin事件，然后触发单击事件。与在另一个问题中一样，我尝试通过调用e.stopPropagation()、e.preventDefault()并从事件处理程序返回false
浏览 4提问于2018-10-03得票数 3
1回答
如何防止引导4下拉显示在输入元素点击？
javascript、jquery、bootstrap-4、event-propagation
下面是一个简单的引导下拉菜单，但切换元素是文本输入的例外。我不希望下拉菜单显示在click事件上，而是希望在用户输入中显示它，这样我就可以基于该输入动态填充菜单。但是，一旦用户在元素中输入了某些内容，下拉列表就会显示。之后，输入元素上的任何后续click都会显示下拉菜单，并且click处理程序将运行，但即使用户清除了所有输入，也不会阻止下拉列表显示。Bootstrap是否附加任何新事件，还是我对事件的理解不够好？我怎么能让这件事成功呢？});
<link
浏览 5提问于2021-11-05得票数 2
回答已采纳
4回答
防止Bootstrap下拉按钮在单击时关闭
javascript、twitter-bootstrap、drop-down-menu、jsfiddle
我的菜单使用引导带3，我不能阻止下拉菜单关闭点击。我该怎么做呢？// Add open class if active $(this).find('.dropdo
浏览 7提问于2014-10-29得票数 14
回答已采纳
2回答
引导3:支持移动电话和向上的多层导航菜单
javascript、css、twitter-bootstrap、responsive-design、twitter-bootstrap-3
我知道自从Bootstrap 3发布以来，多层/多层导航不再是官方支持的。我不明白为什么他们做出这个决定，因为这似乎是一个相当愚蠢的举动，但目前，我试图恢复这个功能/行为在我的网站。:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>navbar-nav > li.active ul li a {
浏览 2提问于2014-05-02得票数 0
回答已采纳
1回答
无法使引导下拉到折叠
jquery、css、twitter-bootstrap、drop-down-menu、nav
它们都是开放的(重叠的)，它们不会关闭(见下文)，我只需要正常地响应下拉列表，如果您单击一个新的，可能会自动关闭另一个下拉列表。></title>
<link href = "bootstrap-3.3.4-dist/css/bootstrap.
浏览 3提问于2015-05-04得票数 0
3回答
下拉切换不能正常工作
jquery
我使用这个jQuery进行下拉切换。它只在启动时工作正常。我已经申请了下面的jQuery。但它只起作用一次。如果我再次单击下拉菜单，则表示下拉菜单未显示... // Show hide popover $(this).
浏览 2提问于2018-08-27得票数 0
2回答
Angular Bootstrap下拉切换不工作
javascript、angularjs、drop-down-menu、angularjs-directive、angular-bootstrap
我有一个Angular Bootstrap下拉菜单，似乎没有切换下拉菜单。单击时，没有显示任何内容，尽管我可以看到inspect元素上的列表项。-- Simple dropdown -->
<span class="dropdown" dropdown on-toggle="toggled(open)"><a href class="dropdown-to
浏览 4提问于2014-12-06得票数 2
1回答
当Bootstrap下拉切换触发时，Jquery 'document on click‘不起作用
jquery、twitter-bootstrap-3、dropdown、stoppropagation
The Problem$(document).on('click', function(event) { $('#myDropdown').removeClass("show-menu");});
它工作得很好，除了当我点击一个bootstrap下拉菜单时(它使用类的
浏览 53提问于2019-05-22得票数 1
回答已采纳
3回答
Bootstrap nav-折叠隐藏在单页应用程序中
twitter-bootstrap
我目前正在为我的单页应用程序使用2.x Bootstrap版本。然而，在我的ipad和手机上，它显示了一个导航按钮，这是很好的。但是，当我单击显示的下拉项中的一个项时，它不会自动关闭。$(.collaps
浏览 0提问于2012-09-01得票数 1
回答已采纳
2回答
下拉值只被点击一次，为什么？
javascript、drop-down-menu
width=device-width, initial-scale=1"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js&#
浏览 0提问于2018-04-17得票数 2
回答已采纳
2回答
引导自定义下拉菜单
jquery、twitter-bootstrap、twitter-bootstrap-3
但是，这显然只有在单击下拉切换类时才有效。$('.dropdown-toggle').click(function() {});
<divclass="dropdown&
浏览 2提问于2016-09-19得票数 0
回答已采纳
3回答
当点击按钮时动画div的高度
javascript、jquery、css、html
当菜单按钮被点击时，我试图将一个下拉菜单div的高度从0到250px动画。我试过使用jQuery。scripts.js"></script><span id="menu_btn" name="menu_button">MENU</span><div id="menu_dropdown-- more buttons -->这是jQuery：
$(&q
浏览 2提问于2014-11-01得票数 0
1回答
自举下拉菜单按钮在单击按钮时更改，在屏幕上单击时也更改。
javascript、html、vue.js、bootstrap-4、drop-down-menu
我想做的是，只有当下拉菜单展开时，按钮的背景色才会变成蓝色。我通过在按钮中添加一个单击监听器来实现它的样式，但问题是当菜单展开，用户单击其他地方时，菜单就会隐藏，而按钮仍然是蓝色的。这是我的代码：<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" :styleclickedBtn : n
浏览 0提问于2021-03-25得票数 2
回答已采纳
2回答
避免下拉式关闭点击外部
jquery、bootstrap-4
通过单击outside.Show避免下拉关闭，并在单击按钮时隐藏下拉菜单。这是。<div class="dropdown"> <span class=&
浏览 0提问于2019-03-12得票数 7
回答已采纳
2回答
如何在React Bootstrap上将函数附加到Dropdown.Toggle？
javascript、reactjs、react-bootstrap
当我的React Bootstrap Dropdown.Toggle被点击时，我正在尝试执行一个函数。我尝试添加onClick，如下所示，但这完全破坏了下拉功能，并且在点击时不会显示下拉菜单： <Dropdown> D
浏览 30提问于2020-06-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
