[英]How do I get my twitter bootstrap navbar to close on click?
I am trying to get my navbar to auto collapse on click. 我试图让我的导航栏在点击时自动崩溃。 Specifically when it is on a mobile device.
特别是当它在移动设备上时。 I do not see why the below code will not work but I believe I maybe have the '.nav navbar-toggle a' wrong.
我不明白为什么下面的代码不起作用,但我相信我可能有'.nav navbar-toggle a'错误。
HTML HTML
<div class="navbar navbar-fixed-top navbar-default" 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="close">
<ul class="nav navbar-nav">
<li class="navtext"><a href="#about">ABOUT</a></li>
<li class="navtext"><a href="#services">SERVICES</a></li>
<li class="navtext"><a href="#work">WORK</a></li>
<li class="navtext"><a href="#contact">CONTACT</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Java script (I added this code to the end of bootstrap.js) Java脚本(我将此代码添加到bootstrap.js的末尾)
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$("#close").click();
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The website is speak-design.com 该网站是speak-design.com
Thank to Hide Twitter Bootstrap navbar on click 感谢点击隐藏Twitter Bootstrap导航栏
I commented first: 我首先评论道:
('.nav navbar-nav a') should be ('.nav.navbar-nav a') see: CSS rule to apply only if element has BOTH classes and you should apply your click for closing on .navbar-collapse if i understand your question well
('.nav navbar-nav a')应该是('.nav.navbar-nav a'),请参阅: CSS规则仅在元素具有BOTH类时应用,并且应该应用您的点击以关闭.navbar-collapse如果我很好地理解你的问题
When i test the above i think i should work with the code shown below. 当我测试上面的时候,我想我应该使用下面显示的代码。
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
</script>
NB i think .collapse('hide');
NB我认为
.collapse('hide');
make more sense (more readable) than doing click
although the effect will be the same maybe. 虽然效果可能相同,但比
click
更有意义(更具可读性)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.