Bootstrap折叠导航栏在单击子菜单后不会保持折叠状态
基础概念
Bootstrap 折叠导航栏（Collapse Navbar）是一种响应式导航栏组件，它可以在小屏幕设备上折叠成一个按钮，点击按钮后展开导航菜单。折叠导航栏通常使用 Bootstrap 的 Collapse 组件来实现。
相关优势
- 响应式设计：自动适应不同屏幕尺寸，提供良好的用户体验。
- 易于实现：Bootstrap 提供了丰富的预定义样式和 JavaScript 插件，简化了开发过程。
- 灵活性：可以根据需要自定义样式和行为。
类型
Bootstrap 折叠导航栏主要有两种类型：
- Navbar 折叠：整个导航栏在小屏幕上折叠成一个按钮。
- Dropdown 折叠：导航栏中的某些项可以折叠成下拉菜单。
应用场景
折叠导航栏广泛应用于移动设备和桌面设备的网站和应用程序，特别是在需要节省空间和提高用户体验的场景中。
问题描述
在单击子菜单后，折叠导航栏不会保持折叠状态。
原因分析
这个问题通常是由于 JavaScript 事件处理不当或 Bootstrap 的 Collapse 组件配置不正确导致的。
解决方法
以下是一个示例代码，展示如何正确配置 Bootstrap 折叠导航栏，使其在单击子菜单后保持折叠状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Collapse Navbar</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</li>
</ul>
</div>
</nav>
<script>
$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').slideToggle(300);
});
});
</script>
</body>
</html>参考链接
通过上述代码，确保在单击子菜单后，折叠导航栏能够正确保持折叠状态。
相关·内容
在bootstrap中，使用下面的代码，我可以展开和折叠两个菜单。但当我展开菜单并单击子菜单时，子菜单不会一直折叠。当我将这一行从class=“折叠列表-未设置样式”更改为class=“折叠列表-未设置样式的显示”时，当我单击下一个主菜单时，菜单会折叠，并且不会</e
浏览 77提问于2019-07-03得票数 0
正如标题中所述，当我单击导航栏按钮时，导航栏不会折叠，但会保持打开状态。 之前我遇到了数据切换的问题，你必须在bootstrap 5中进行数据切换，我解决了这个问题。当我在devTools中检查<div class ="collapse navbar-collapse" id="navbar">时，它在单击时更改为<div
浏览 62提问于2021-03-16得票数 1
回答已采纳
13回答
我正在使用Bootstrap响应式导航栏。当导航栏折叠时，当我打开菜单并单击菜单项时，菜单不会自动关闭，我必须手动关闭。
是否可以在单击其中一个按钮后使菜单自动关闭？
浏览 14提问于2013-01-10得票数 40
回答已采纳
我正在使用导航栏中带有子菜单项的可折叠菜单。菜单在窄屏幕上可以正确折叠，并且子菜单项可以正确显示。
但是，当我在移动设备上单击子菜单项时，链接不起作用。相反，子菜单会折叠，并且折叠菜单上的顶部菜单项被高亮显示，就好像子<e
浏览 0提问于2013-07-03得票数 17
回答已采纳
试图让我的导航栏保持在ipad大小。我使用了这里的代码： .navbar-collapse.collapse.in {
display: block!因此，我尝试在代码的第一部分添加collapse.in，其中.navbar-col
浏览 2提问于2017-01-22得票数 0
我需要帮助隐藏/折叠导航栏后，在一个锚点登陆页面。我在Bootstrap 4.x上使用了这个脚本 <script type="text/javascript ">
$(document).on('click', '.navbar-collapse但是，在加载/重新加载页面时，导航栏默认展开而不折叠</e
浏览 46提问于2021-06-29得票数 0
回答已采纳
1回答
在bootstrap中，我想让两个导航栏位于彼此的下方。我的想法是：导航栏2(在navbar1下面)有一个名为: sub menu的品牌。当用户在他的移动电话上查看网站时，他/她看到两个可折叠的导航栏。用户现在可以选择要打开的导航栏。菜单或子菜单。
我
浏览 1提问于2013-12-20得票数 20
回答已采纳
尝试使用折叠菜单打开侧边栏上的子菜单。我尝试在第一次单击时列出菜单中的所有内容，然后通过折叠菜单打开一个子菜单。但它会在页面刷新时关闭。
有人知道我怎么解决这个问题吗？
浏览 1提问于2014-10-03得票数 0
1回答
Bootstrap的导航栏下拉菜单有两个问题。首先，导航栏中的下拉列表在每个页面上都不起作用。导航栏的外观如下所示。
Calendar是一个嵌入到页面中的Google日历。每当我单击日历链接本身时，下拉菜单都不起作用。如果我在日历页上单击后尝试导航到另一页，下拉菜单也不起作用。但是，如果我导航</em
浏览 0提问于2016-11-28得票数 0
我创建了一个导航菜单，我将在基于Bootstrap 4的站点中使用它。我找到了一些jquery代码，我对它们进行了修改以适应我想要的功能，但是有一行代码我不太理解。我一直在开发人员工具中使用它，试图进一步了解它。我可以向你介绍我理解的逻辑，希望你能引导我朝着正确的方向前进。 使用下面的代码，它正在寻找一个要冒泡的事件。然后，它将使用.navbar- class类获取导航，并检查它是否具有show类。正是在这个阶段，我迷失了方向。我知道bang标签(!)这没有任何意义，因为需要单击才能在第
浏览 20提问于2020-04-21得票数 0
回答已采纳
这个问题可以在所有(据我所知的) Twitter Bootstrap版本中表现出来。所以，我有一个导航栏，当屏幕变小时，它就变成了一个可折叠的托盘。这种行为可以在bootstrap演示站点上看到。我还有一些子菜单，在最初的导航栏展开时显示为折叠的。问题是，在第一次折叠时，可折叠对象会得到一个显式的高度设置。如果关闭并再次展开，可
浏览 0提问于2013-02-07得票数 7
回答已采纳
我见过无数用引导程序制作的边栏导航菜单的例子，但似乎没有一个是我喜欢的。
是否可以使用Bootstrap + javascript在侧边栏
浏览 3提问于2016-11-07得票数 0
我第一次使用bootstrap开发自己的wordpress主题，在使用wp-bootstrap-navwalker时遇到了一个问题。我已经创建了两个菜单，一个在sm，md和lg中可见，另一个在xs中可见。在xs中，它应该是折叠的，并在按下按钮后打开，但是在我将wp-bootstrap-navwalker添加到我的html后，它不再工作。<!::fall
浏览 17提问于2016-08-09得票数 1
2回答
我使用的是bootstraps nav bar.When，当用户点击一个导航栏按钮时，导航栏保持打开状态。如何在单击导航栏按钮时折叠导航栏？><a data-toggle="tab" href="#sectionC">Page3</a></li>
</
浏览 2提问于2014-09-12得票数 2
回答已采纳
6回答
我有一个基本的Bootstrap 3响应式导航，如下所示： </ul> </div>
浏览 78提问于2013-08-10得票数 15
回答已采纳
然而，在某个断点(768px)，当我最小化并开始拖动屏幕的一个边缘来模拟移动设备时，切换按钮取代了导航栏菜单。到目前一切尚好。
这就是问题开始的地方。在过去的四天里，我必须在这里搜索所有关于引导导航栏崩溃的帖子，甚至那些声称同时使用站点地图和引导的帖子在他们的代码中都有<ul>，<li>和‘下拉/子菜单’，这些都不相关。当然，肯定有一种方法可以在bootstrap中使用sitemap
浏览 3提问于2017-09-04得票数 0
对于B3，有大量带有下拉菜单的顶级导航栏的模板。随着屏幕尺寸变小，菜单折叠为3栏按钮，菜单变成折叠菜单。当屏幕变小时，我是否必须隐藏整个<e
浏览 1提问于2016-04-25得票数 1
3回答
我正在开发一个带有相当大的折叠样式导航的 (它不使用折叠UI)。
有四个子菜单部分可在单击时切换为打开状态。我已突出显示活动链接。剩下的一步是在子菜单中的页面上保持当前活动的子菜单处于打开状态。当我处理静态页面时，我可以让它保持打开，但在这个网站上，导航是一个包含文件，因此我需要一些帮助来制定一个动态的方式来<
浏览 2提问于2009-12-01得票数 1
回答已采纳
1回答
)) { }
}); 问题出在导航栏-折叠中，我有一些子菜单，当我单击展开/折叠它们时。它还可以折叠主导航菜单。
浏览 34提问于2020-07-07得票数 0
twitter-bootstrap 'hero‘示例()运行良好。冒着描述显而易见的事实的风险。在小屏幕上，当导航栏菜单被激活时，只有第一级项可见，子项被折叠。也可以通过再次点击父对象来折叠它们。
我在Joomla站点()上使用引导模板。不幸的是，当导航栏在一个小屏幕上被激活时，它会扩展许多子项。点击父项目不会展开/折叠其子项目。如何让twit
浏览 5提问于2013-04-06得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
