相关疑难解决方法(0)
Bootstrap 3折叠菜单未单击关闭
我有一个或多或少来自bootstrap 3的标准导航
<body data-spy="scroll" data-target=".navbar-collapse">
<!-- ---------- Navigation ---------- -->
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html"> <img src="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>
</div>
</div>
</div>
它在较小的设备上正常崩溃.单击菜单按钮可以展开菜单,但如果我在菜单链接上单击(或触摸),菜单将保持打开状态.我该怎么办,再次关闭它？
推荐指数
解决办法
查看次数
Bootstrap关闭响应菜单"点击"
在"产品"上单击我向上滑动一个白色div(如附图所示).在响应式(移动设备和平板电脑)时,我想自动关闭响应式导航栏并仅显示白色条.
我试过了:
$('.btn-navbar').click();
还尝试过:
$('.nav-collapse').toggle();
它确实有效.然而,在桌面大小的情况下,它也会被调用并对菜单做一些时髦的事情,它会缩短一秒钟.
有任何想法吗？
推荐指数
解决办法
查看次数
如何在点击时隐藏可折叠的Bootstrap 4导航栏
我使用Bootstrap 4创建了这个可折叠的导航栏,效果很好,但我想在用户点击链接时关闭它.有什么办法吗？谢谢
html导航栏:
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
css for .icon-bar,因为Bootstrap 4不使用icon-bar类.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: …推荐指数
解决办法
查看次数
自动关闭响应式导航栏
我正在使用Bootstrap响应式导航栏.折叠导航栏并打开菜单并单击菜单项时,菜单不会自动关闭,我必须自己手动完成.
单击其中一个按钮后是否可以自动关闭菜单？
推荐指数
解决办法
查看次数
点击隐藏Twitter Bootstrap导航栏
我想点击关闭移动导航栏,我在这里看到了我的问题的答案 .这个问题中给出的代码的问题在于它总是试图关闭导航栏,无论我们是否看到切换导航栏或"正常"导航栏.所以我想做一个if/else检查宽度是否高于或低于768px(更改导航栏的宽度),所以我现在在document.ready()中有这个.
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function(){
$(".navbar-toggle").click();
});
}
}
close_toggle();
$(window).resize(close_toggle);
这段代码的问题在于,如果我以高于768px的宽度开始并且小于768px,则一切正常.但是如果我开始宽度低于768px,当我调整到更高的768px时,正常的导航栏会在我点击链接时闪烁(因为我正在关闭切换菜单).
所以我需要一个else语句来反转if代码,但我不知道如何反转代码.抱歉一些英语错误.希望有人可以帮助我.
推荐指数
解决办法
查看次数
单击Bootstrap折叠导航栏
我正在使用bootstraps导航栏.当用户点击导航栏按钮时,导航栏保持打开状态.如何在单击导航栏按钮时折叠导航栏？
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
<li><a data-toggle="tab" href="#sectionB">Page2</a></li>
<li><a data-toggle="tab" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
截图:
这是单击导航栏按钮后的方式(菜单保持打开状态):
这是我在点击导航栏按钮(返回原始状态)后想要的样子:
推荐指数
解决办法
查看次数