[英]Bootstrap Navbar not collapsing with Smooth Scroll Script
I'm using the Bootstrap Navbar on a one-page website and each anchor is linked to a section on the page. 我在一页网站上使用Bootstrap导航栏,每个锚点都链接到页面上的一个部分。 I'm using a very simple javascript to smooth scroll to each section, however this somehow conflicts the collapse function of the navbar - when I click on a link it doesn't collapse anymore which is annoying.
我正在使用一个非常简单的JavaScript平滑滚动到每个部分,但是这在某种程度上与导航栏的折叠功能冲突-当我单击链接时,它不再折叠了,这很烦人。 I first thought it might be a HTML problem (solved here: Bootstrap Navbar Collapse not closing on Click ) but figured out it is a JS problem - any ideas?
我首先认为这可能是HTML问题(在此处解决: Bootstrap Navbar折叠未在Click上关闭 ),但发现这是一个JS问题-有什么想法吗?
HTML: HTML:
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-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>
</div>
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>
</ul>
</div>
</nav>
JAVASCRIPT: JAVASCRIPT:
var corp = $("html, body");
$(".navelement").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
you can use jQuery :not selector-utility 您可以使用jQuery:not selector-utility
eg 例如
$('a[href*=#]:not([href=#], [data-toggle=collapse])').click(function(){...})
or in your example: 或在您的示例中:
var corp = $("html, body");
$(".navelement:not([data-toggle=collapse])").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.