Bootstrap Navbar Toggler -自定义JS使导航栏菜单在下拉单击时关闭
Bootstrap Navbar Toggler是Bootstrap框架中的一个组件，用于创建响应式导航栏菜单。它允许用户在移动设备上点击菜单按钮时，自动展开或折叠导航栏菜单。
使用自定义JS可以实现在下拉单击时关闭导航栏菜单的功能。具体实现步骤如下：
- 首先，为导航栏菜单按钮添加一个点击事件监听器。
- 在点击事件处理函数中，获取导航栏菜单的状态，判断当前菜单是否已经展开。
- 如果菜单已经展开，则使用Bootstrap提供的方法将菜单折叠起来。
- 如果菜单已经折叠，则不执行任何操作。
以下是一个示例代码，演示如何使用自定义JS实现导航栏菜单在下拉单击时关闭：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Navbar Toggler</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
// 获取导航栏菜单按钮
var navbarToggler = document.querySelector('.navbar-toggler');
// 添加点击事件监听器
navbarToggler.addEventListener('click', function() {
// 获取导航栏菜单的状态
var isExpanded = navbarToggler.getAttribute('aria-expanded');
// 判断菜单是否已经展开
if (isExpanded === 'true') {
// 使用Bootstrap提供的方法将菜单折叠起来
navbarToggler.click();
}
});
</script>
</body>
</html>在上述示例代码中，我们使用了Bootstrap框架提供的CSS和JavaScript库。通过自定义的JavaScript代码，我们为导航栏菜单按钮添加了一个点击事件监听器。在点击事件处理函数中，我们判断菜单的展开状态，并使用Bootstrap提供的方法将菜单折叠起来。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云CDN。
相关·内容
我创建了一个导航菜单，我将在基于Bootstrap 4的站点中使用它。我找到了一些jquery代码，我对它们进行了修改以适应我想要的功能，但是有一行代码我不太理解。然后，它将使用.navbar- class类获取导航，并检查它是否具有show类。正是在这个阶段，我迷失了方向。我知道bang标签(!)用于切换，表示与赋值相反的值，因此我的大脑将其解释为无事件，如果存在.navbar-toggler类，则隐藏该元素？这没有任何意义，因为需要单击才能在第一个
浏览 20提问于2020-04-21得票数 0
回答已采纳
6回答
我有一个基本的Bootstrap 3响应式导航，如下所示： <a id="navbar-toggle" class="navbar</em
浏览 78提问于2013-08-10得票数 15
回答已采纳
对于所有浏览器大小，此导航栏都会折叠。我想知道在菜单之外单击时如何关闭展开的菜单。因此，切换按钮并不是关闭它的唯一方法。我已经为Bootstrap 3尝试了一些建议，其中之一是下面包含的Javascript代码，但它们似乎不起作用。
说我不太了解Javascript或PHP可能是有用的，但我愿意接受你的任何建议。<nav class="navbar navbar-i
浏览 3提问于2017-10-14得票数 3
我是JS的新手，正在学习如何编写网站代码。我使用的是我在网上找到的一个模板，它做了一些自定义修改，所以我对使用的JS不是很熟悉。这是问题所在。在使用导航栏切换器时，当菜单中发生一次单击时，会有一些自定义JS来关闭菜单。问题是我在菜单中添加了一个下拉列表，当单击它而不是显示<e
浏览 64提问于2021-06-23得票数 2
13回答
我正在使用Bootstrap响应式导航栏。当导航栏折叠时，当我打开菜单并单击菜单项时，菜单不会自动关闭，我必须手动关闭。
是否可以在单击其中一个按钮后使菜单自动关闭？
浏览 14提问于2013-01-10得票数 40
回答已采纳
2回答
我有汉堡包菜单，开得很好。当我再次点击汉堡包菜单图标时，我希望它关闭(这是不工作的，我挣扎)。(仅当我单击某个链接或单击菜单外部时，它才会关闭)。
="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quo
浏览 1提问于2019-07-01得票数 2
回答已采纳
我现在已经在两个独立的项目中遇到了这个问题。在bootstrap 4中，如果导航元素具有定义的高度，则导航条切换按钮的位置是单击时的移动位置。我创建了一个小提琴来显示这个问题：有人能解释为什么会发生这种情况吗?如果有解决方案，解决方案是什么？HTML：
<nav id="site-<e
浏览 0提问于2018-05-29得票数 5
Boostrap 4导航栏，我用jquery删除了数据切换=切换，并在桌面上添加了一个“打开”，效果很好。我现在的问题是，我希望导航栏项目在某个断点“平板电脑/移动设备”被“点击”。HTML：<ul class="navbar-nav"><li class
浏览 6提问于2019-11-14得票数 2
回答已采纳
我正在尝试使Bootstrap4导航栏只使用香草js而不是任何jQuery。到目前为止，我已经能够让触发器在移动设备上触发导航崩溃和关闭。我现在想知道的是，当你点击一个"nav-link“时，如何使导航栏崩溃。这是我的导航HTML： <nav class="navbar navbar-expand-
浏览 12提问于2020-04-06得票数 1
回答已采纳
我在我的应用程序中使用了Angular Bootstrap。我在其中使用了2个导航栏。它对我来说工作正常，也是响应式的。我想要做的是使导航栏切换按钮作为下拉列表，而不是出现并停留在那里。$(".navbar .navbar-collapse").removeClass("in");
scope.navCollapsed = false;}
浏览 4提问于2015-07-10得票数 0
1回答
用一些自定义的jQuery和CSS创建了一个Bootstrap多级下拉式导航栏。 但是在移动设备中切换打开和关闭子菜单有一个问题。/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar</
浏览 23提问于2020-07-20得票数 0
8回答
我在一个只有一页的网站上使用Bootstrap和它的折叠导航栏，还有一个简单的滚动脚本，所以如果我点击一个链接，页面就会向下滚动到锚点-效果很好。然而，当我点击一个覆盖了移动设备上大量内容的链接时，导航栏不会折叠-你必须首先点击切换，这很烦人。我发现将数据切换和数据目标属性添加到链接应该会有帮助，但它根本不起作用-我的错误在哪里？导航：
<nav class="navbar navbar-defaul
浏览 12提问于2015-02-12得票数 5
我有一个用靴带做的下拉菜单。我在下拉菜单图标上实现了一个jQuery toggleClass，它可以在单击时更改图标。通常情况下，它应该在菜单关闭时显示汉堡包图标，然后在菜单打开时更改为X图标。但是这里的问题是，如果菜单点击得太快(双击)，情况就会相反(即当菜单关闭时显示一个X图标，打开<em
浏览 9提问于2022-10-18得票数 1
回答已采纳
1回答
折叠时，引导导航栏菜单不会下拉
、、、、
我一直在使用Bootstrap构建一个响应式站点，但导航栏给我带来了问题。现在，我将它设置为当屏幕尺寸缩小时切换，虽然它确实为下拉菜单创建了一个按钮，但当单击该按钮时，菜单实际上不会下拉。我使用的是Bootstrap 4 ()<nav class="navbar navbar-expan
浏览 0提问于2020-04-03得票数 2
我可以看到导航栏，但是当我单击导航栏以显示下拉菜单时，它没有响应。 <!-- collapse when screen get small --> data-target=".<
浏览 11提问于2019-05-10得票数 0
回答已采纳
1回答
我在Bootstrap4中遇到了折叠导航栏的问题。<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-togglernavbar-toggler-right collapsed" ty
浏览 10提问于2017-08-22得票数 2
编辑：HTML：
<!<button class="navbar-toggler navbar-toggler-right" type="butt
浏览 26提问于2020-02-05得票数 0
回答已采纳
1回答
在手机上替换主导航菜单？
、、、
所以，我有一个站点，在顶部有一个主导航栏，在侧栏中有一个辅助导航栏。次要导航在主导航中包含相同的链接，但在子页面中包含下拉链接。它在桌面上工作得很好，但是当导航崩溃时，我在顶部得到了两个导航条，基本上显示了相同的东西。所以，我想，对于移动，因为侧栏导航只是主导航的一个更详细的
浏览 0提问于2020-03-10得票数 0
17回答
如何在单击navbar元素外部时关闭已打开的折叠导航条？目前，打开或关闭它的唯一方法是单击navbar-toggle按钮。有关示例和代码，请参见：jQuery(document).click(function() {
jQuery(".navbar
浏览 35提问于2014-05-20得票数 47
回答已采纳
我使用的是角形8的ng引导，而且我的导航条有问题。当单击汉堡包图标时，导航条在响应和打开/关闭方面的行为是正确的，但问题是当单击其中一个链接或用户单击“外部”按钮时，它不会“自动关闭”。只有当用户再次点击汉堡包时，它才会关闭。是否有一种方法使用ng引导使导航栏在单击时</em
浏览 2提问于2019-06-12得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
