在“产品”上单击我向上滑动一个白色 div（如附件所示）。在响应式（手机和平板电脑）时，我想自动关闭响应式导航栏，只显示白条。
我试过：
$('.btn-navbar').click();
也试过：
$('.nav-collapse').toggle();
它确实有效。然而，在桌面尺寸中，它也被称为并对菜单做一些时髦的事情，它会缩小一秒钟。
有任何想法吗？
问问题
196704 次
24 回答
142
您不必在引导折叠选项中已包含的内容中添加任何额外的 javascript。相反，只需在菜单列表项中包含数据切换和数据目标选择器，就像使用导航栏切换按钮一样。因此，对于您的 Products 菜单项，它看起来像这样
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
然后您需要为每个菜单项重复数据切换和数据目标选择器
编辑！！！ 为了修复溢出问题并在此修复上闪烁，我添加了更多代码来修复此问题，但仍然没有任何额外的 javascript。这是新代码：
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/
这将使您的切换和目标选择器特定于屏幕尺寸，并消除较大菜单上的故障。如果有人仍然遇到故障问题，请告诉我，我会找到解决办法。谢谢
编辑：在引导程序 v4.1.3 和 v5.0 中，我不能使用可见/隐藏类。而不是hidden-xs使用d-none d-sm-block，而不是visible-xs使用d-block d-sm-none。
编辑：在 bootstrap v5 中，代替data-toggleusedata-bs-toggle和代替data-targetuse data-bs-target。
于 2014-02-13T02:29:38.433 回答
103
我已经把它与动画一起工作了！
html中的菜单：
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
将导航中所有元素的单击事件绑定到折叠菜单（Bootstrap 折叠插件）：
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
编辑 为了使其更通用，我们可以使用以下代码片段
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
于 2013-06-26T10:09:57.097 回答
41
我认为你是工程师..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
编辑：要处理子菜单，请确保他们的切换锚点上有下拉切换类。
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
编辑 2：添加对电话触摸的支持。
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
于 2014-04-19T14:59:49.230 回答
37
我真的很喜欢 Jake Taylor 的想法，即无需额外的 JavaScript 并利用 Bootstrap 的折叠切换。data-target我发现您可以通过稍微修改选择器以包含in该类来解决菜单未处于折叠模式时出现的“闪烁”问题。所以它看起来像这样：
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
我没有用嵌套的下拉菜单/菜单测试它，所以 YMMV。
于 2014-09-20T23:36:11.040 回答
10
为了完整起见，在 Bootstrap 4.0.0-beta 中使用.show为我工作......
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
于 2017-08-22T13:15:32.483 回答
5
我假设你有这样一行定义导航区域，基于 Bootstrap 示例和所有
<div class="nav-collapse collapse" >
只需添加这样的属性，例如在菜单按钮上
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
我也添加了<body>，工作。不能说我已经分析过它或其他任何东西，但对我来说似乎是一种享受......直到你点击 UI 的随机点打开菜单，所以不太好。
丹麦
于 2013-06-21T19:37:11.187 回答
4
这有效，但没有动画。
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
于 2013-01-07T22:27:25.343 回答
3
在 HTML 中，我在每个导航链接的a标签中添加了一个nav-link类。
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
于 2015-04-20T18:12:36.930 回答
3
该解决方案在台式机和移动设备上都表现出色。
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
于 2015-12-12T14:28:58.800 回答
2
只是为了说明 user1040259 的解决方案，将此代码添加到您的 $(document).ready(function() {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
正如他们所提到的，这不会为移动设置动画......但它确实关闭了项目选择的导航栏
于 2013-06-20T13:15:11.357 回答
2
对于那些使用 AngularJS 和 Angular UI Router 的人，这是我的解决方案（使用 mollwe 的切换）。其中“.navbar-main-collapse”是我的“数据目标”。
创建指令：
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
使用指令：
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
于 2013-11-20T17:38:24.617 回答
2
这应该可以解决问题。
需要 bootstrap.js。
示例 => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
这与将 'data-toggle="collapse"' 和 'href="yournavigationID"' 属性添加到导航菜单标签的作用相同。
于 2015-08-25T17:49:52.483 回答
1
我正在使用 mollwe 函数，尽管我添加了 2 个改进：
a) 如果单击的链接折叠（包括其他链接），请避免关闭下拉菜单
b) 如果您单击可见的 Web 内容，也隐藏下拉菜单。
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
于 2013-08-25T17:53:46.140 回答
1
不是最新的线程，但我搜索了相同问题的解决方案并找到了一个（其他一些问题的混合）。
我给了导航按钮：
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
一个 id / 标识符，如：
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
不是最好的“想法”——但是：对我有用！现在您可以检查按钮的可见性（使用 jquery），例如：
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
（注意：这只是一个代码片段！我在导航链接上使用了“onclick”事件！（启动 AJAX 请求。）
结果是：如果按钮是“可见的”，它会被“点击”......所以：如果您使用 Bootstrap 的“全屏视图”（宽度超过 940 像素），则没有错误。
问候拉尔夫
PS：它适用于 IE9、IE10 和 Firefox 25。没有检查其他人 - 但我看不到问题 :-)
于 2013-11-05T12:29:42.557 回答
1
这对我有用。我已经这样做了，当我单击菜单按钮时，我会添加或删除“in”类，因为通过添加或删除该类，默认情况下切换是有效的。'e.stopPropagation()' 是通过引导程序停止默认动画（我猜）你也可以使用'toggleClass' 代替添加或删除类。
$('#ChangeToggle').on('点击', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
于 2017-01-06T00:38:46.190 回答
0
你可以使用
ul.nav {
display: none;
}
这将默认关闭导航栏。请让我知道有人觉得这很有用
于 2013-06-28T16:01:47.023 回答
0
例如，如果您的可切换图标仅对超小型设备可见，那么您可以执行以下操作：
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
单击 [data-toggle="offcanvas"] 会将引导程序的 .hidden-xs 添加到我的 #side-menu 中，这将隐藏侧面菜单内容，但如果您增加窗口大小，它将再次可见。
于 2015-02-03T10:23:32.187 回答
0
$('.navbar-toggle').trigger('click');
于 2017-01-25T13:13:57.360 回答
0
如果菜单 html 是
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle 'in' 类被添加并从切换中删除。检查是否打开了响应式菜单，然后执行关闭切换。
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
于 2017-03-17T05:48:44.867 回答
0
Tuggle Nav Close，IE 浏览器兼容答案，没有任何控制台错误。如果您使用的是引导程序，请使用此
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
于 2018-12-03T12:32:01.387 回答
0
没有任何 Javascript 的 Bootstrap 4 解决方案
将属性添加data-toggle="collapse" data-target="#navbarSupportedContent.show" 到 div<div class="collapse navbar-collapse">
确保您提供正确id的data-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.show是为了避免在大分辨率下菜单闪烁
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>于 2018-12-15T04:13:18.427 回答
0
我找到了一个简单的解决方案。只需在导航栏链接上添加按钮的切换代码即可。在下面的示例中是代码data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"。
这将在单击时关闭菜单并点击链接
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse nav-format-mobile" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!--https://stackoverflow.com/a/65365121/5763690-->
<li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item -->
<a class="nav-link" aria-current="page" [routerLink]="'about'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" [routerLink]="'services'" fragment="why-us" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Overview</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" [routerLink]="'services'" fragment="project" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For companies</a></li>
<li><a class="dropdown-item" [routerLink]="'services'" fragment="startups" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For Startups</a></li>
<li><a class="dropdown-item" [routerLink]="'/services'" fragment="ngos" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For NGOs</a></li>
</ul>
</li>
<li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item -->
<a class="nav-link" [routerLink]="'products'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'career'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'contact'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Contact</a>
</li>
</ul>
</div>
于 2021-09-13T14:29:21.967 回答
0
我在我的 Vue.js 3 应用程序中尝试了其他建议，但是我的 vue-router 路由器链接不再起作用。
如果菜单具有“显示”类，我创建了一个小功能来单击菜单切换。在所有情况下，这对我都很有用。
<template>
...
<div
id="navbarNavigation"
class="collapse navbar-collapse"
>
<ul
class="navbar-nav me-auto mb-2 mb-lg-0"
>
<li class="nav-item">
<router-link
:to="route.url"
class="nav-link"
@click="closeMenu('navbarNavigation')"
>
My route name
</router-link>
</li>
</ul>
</div>
...
</template>
<script>
setup (props) {
const closeMenu = (id) => {
const menuShown = document.getElementById(id).classList.contains('show')
if (menuShown) {
const menuToggle = document.getElementsByClassName('navbar-toggler')[0]
menuToggle.click()
}
}
return { closeMenu }
}
</script>
于 2021-11-07T23:50:01.587 回答
0
对于使用Bootstrap 5 + -attributes寻找有关Vue 3router-link的解决方案的窥视者：data-bs
使用data-bs-attributes 直接在 Vue 上切换导航router-link似乎不起作用 - 因此，如果尚未完成，您需要将每个导航链接包装在父元素中（li这是显而易见的选择）并应用data-bs该元素的相关属性。
简而言之 - 而不是这个：
<li class="nav-item">
<router-link
to="/galaxy"
class="nav-link d-flex"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse.show"
>
<v-icon name="gi-galaxy" size="1" class="align-middle" scale="1.5" />
<span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
</router-link>
</li>
用这个：
<li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse.show">
<router-link to="/galaxy" class="nav-link d-flex">
<v-icon name="gi-galaxy" class="align-middle" scale="1.5" />
<span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
</router-link>
</li>
于 2022-02-07T23:36:28.780 回答