关闭下拉菜单，同时在引导程序中打开另一个下拉菜单
基础概念
下拉菜单（Dropdown Menu）是一种常见的用户界面元素，通常用于在有限的空间内展示多个选项。用户可以通过点击或悬停来展开或关闭下拉菜单。
相关优势
- 节省空间：下拉菜单可以在不占用大量屏幕空间的情况下展示多个选项。
- 提高交互性：用户可以通过简单的点击或悬停操作来访问不同的选项，提高了界面的交互性。
- 统一设计：下拉菜单可以保持界面的一致性和整洁性。
类型
- 静态下拉菜单：固定在页面上的下拉菜单，通常用于导航。
- 动态下拉菜单：根据用户的选择或其他条件动态改变选项的下拉菜单。
- 级联下拉菜单：一个下拉菜单的选项会影响另一个下拉菜单的选项。
应用场景
- 网站导航
- 表单选择
- 设置菜单
- 数据过滤
问题描述
在引导程序（Bootstrap）中，关闭一个下拉菜单并同时打开另一个下拉菜单。
原因及解决方法
在Bootstrap中，下拉菜单通常通过JavaScript事件来控制其展开和关闭。要实现关闭一个下拉菜单并同时打开另一个下拉菜单，可以使用Bootstrap提供的JavaScript API。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</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="#" id="closeDropdown">Close Me</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="anotherDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Another Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="anotherDropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">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.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.getElementById('closeDropdown').addEventListener('click', function(event) {
event.preventDefault();
$('#dropdownMenuButton').dropdown('toggle');
$('#anotherDropdownMenuButton').dropdown('toggle');
});
</script>
</body>
</html>解释
- HTML部分：定义了两个下拉菜单，每个菜单都有一个按钮和一个下拉列表。
- JavaScript部分：通过监听第一个下拉菜单中的“Close Me”选项的点击事件，关闭第一个下拉菜单并同时打开第二个下拉菜单。
参考链接
Bootstrap Dropdown Documentation
通过这种方式，你可以实现关闭一个下拉菜单并同时打开另一个下拉菜单的功能。
相关·内容
版本：角度: 12.1.3在另一个下拉菜单打开后单击下拉按钮，第一个下拉菜单不会关闭。
但在ngx@6.2.0中，这种情况并没有发生。
浏览 2提问于2021-08-10得票数 1
回答已采纳
当一个引导下拉列表打开时，打开另一个下拉列表需要两个点击。这是因为一个覆盖div吞下所有其他输入，以关闭第一个下拉列表。
浏览 6提问于2016-10-24得票数 2
回答已采纳
我有两个下拉菜单residential和utility..。当我点击时residential若要打开，它将保持打开状态，但当我单击utility，我想residential自动关闭。
浏览 109提问于2021-02-25得票数 1
回答已采纳
我正在使用带下拉菜单的bootstrap 3导航栏。默认的行为是点击打开下拉菜单，第二次点击关闭。我想在第二次点击时访问该链接。是否可以使用默认引导程序functionality>
浏览 3提问于2014-06-03得票数 2
对于整个站点来说，使用非常简单
但是如果我有一个小的容器，比如400px，并且需要关闭这个容器内部的响应性，那该怎么办呢？我需要在我的导航栏中使用全功能的下拉菜单，但当响应式打开时，小容器中的下拉菜单不像“弹出窗口”那样，它们在导航栏中打开并伸展它们。此外，如果没有响应样式，我无法编译自己的引导程序版本，因为我需要使用CDN (cdnjs)。
浏览 1提问于2014-04-27得票数 0
我是NgbDropdown和相关ng引导代码的新手，当使用enter键打开一个新NgbDropdowns时，我很难弄清楚如何关闭所有以前的NgbDropdowns。我在我的角度项目中的页面上创建了一些NgbDropdowns，我发现当我单击从下拉按钮到下拉按钮时，先前打开的下拉按钮就会关闭；但是，如果我从一个打开的下拉按钮到另一个下拉按钮，并使用enter键打开第二个下拉菜单此序列可以在NgbDro
浏览 3提问于2019-12-03得票数 2
回答已采纳
1回答
我正在用开发一个桌面应用程序。我已经向添加了一些项目。我做了一些研究，有些人说。还有另一个选择，也许是最好的方法。禁用每个下拉菜单的所有选项。每个菜单项目都有一个，因此可以在运行时对其进行更改。是否有办法避免下拉菜单和禁用下拉菜单？
浏览 2提问于2018-01-17得票数 2
回答已采纳
2回答
我有一套4个引导手风琴，我在我的导航中使用下拉菜单打开手风琴。
我可以打开手风琴，但当我打开多个手风琴时，它不会关闭之前打开的手风琴，有没有办法在单击另一个链接时关闭打开的手风琴？
浏览 1提问于2014-10-16得票数 0
1回答
我正在为网站下拉菜单开发这个jQuery脚本方法。我在代码中遇到了一个似乎无法通过的小问题。
支持根级菜单中的多个下拉菜单
浏览 0提问于2016-12-27得票数 4
回答已采纳
1回答
在这个中
如果单击"A2"，则"B1“首先打开下拉菜单，然后在第一个下拉菜单中打开另一个下拉菜单。然后，如果您再次单击"A2“，则第二个下拉列表将关闭，然后第一个下拉列表将关闭。如果您打开"A2“、"B1”和"C2“，您将有三个下拉列表。如果您关闭"B1"，逻辑上"C2“将在&quo
浏览 0提问于2014-03-11得票数 0
回答已采纳
我在我的项目中包含了引导CSS，但没有包含它的Javascript或jquery位。我已经知道如何打开和关闭下拉菜单等仅角，但尚未能够触发模式。如何在不使用引导程序的javascript或jQuery的情况下打开(并关闭)模态对话框？
我对角度很陌生，所以这对我来说太明显了。还在制造一个问题好让我以后再回答。
浏览 0提问于2018-01-31得票数 1
回答已采纳
1回答
所以我刚刚开始使用引导程序的下拉菜单。很方便，但我有个问题。为了使下拉菜单工作，似乎在添加html属性data-toggle="dropdown"时完全禁用了触发下拉菜单的元素的原始函数(.下拉切换)。我希望下拉菜单在保存执行后显示出来。如何在单击按钮时同时切换下拉菜单和来执行ajax请求？或者在更模糊的意义上，如何在保留按钮的原始函数的同时切换下拉菜单
也许t
浏览 1提问于2012-12-09得票数 3
回答已采纳
2回答
我有这个脚本，可以在我的导航项目下打开下拉列表。只有当我单击另一个导航项目以打开另一个下拉列表时，我才能关闭它。如何让当前导航项在单击时关闭，同时在其他导航项被单击时保持关闭功能？
浏览 1提问于2013-01-25得票数 2
回答已采纳
我想要一个响应式的垂直导航栏，我正试着用Bootstrap 5来获得它，我想要多级下拉菜单项。如果它不能做到这一点，那么实现这一点的最干净的方法是什么，最好不改变当前的代码(它适用于单级下拉菜单，但不适用于多级下拉列表)？
浏览 1提问于2021-01-27得票数 4
下拉菜单中的项目都有一个onPress支柱，它在关闭下拉菜单本身的同时执行给定的功能。这很好，除非我想使用onPress事件打开另一个响应-本机Modal。</Modal>这与网络上预期的一样--下拉列表的Modal关闭，另一个Modal同时打开。然而，在iOS上，第二个Modal从未打开，应用程序</
浏览 19提问于2022-04-27得票数 0
回答已采纳
4回答
我使用javascript函数dropdown('toggle')启动引导下拉菜单，如声明的。
$('body
浏览 6提问于2015-09-08得票数 2
回答已采纳
2回答
我正在尝试实现一个具有搜索功能的Antd下拉菜单，并希望在单击外部时关闭下拉菜单。但在我的代码中，即使我点击了搜索框，在点击外部的同时，它也会切换下拉菜单的打开和关闭(这不是我们想要的)。我希望我的下拉菜单只在搜索框中有一些字符输入时才打开，如果搜索框中没有字符或在外部单击时关闭，如果我继续单击搜索框本身，下拉菜单</e
浏览 282提问于2021-06-05得票数 2
3回答
我打开了一个bootstrap下拉菜单，并使其保持打开状态，同时使用我放置在其中的网格，我可以在单击下拉区域外部时关闭该下拉菜单，但我希望在按钮单击事件时关闭它。button type="button" id="btnFilter" class="btn btn-sm btn-success">Filter</button>
</ul>
浏览 4提问于2016-10-02得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
