引导程序导航栏未使用平滑滚动脚本折叠
Bootstrap Navbar not collapsing with Smooth Scroll Script
我在一个单页网站上使用引导导航栏,每个锚都链接到页面上的一个部分。我使用一个非常简单的javascript来平滑滚动到每个部分,但这在某种程度上与导航栏的折叠功能相冲突——当我点击链接时,它不再折叠,这很烦人。我最初认为这可能是一个HTML问题(在这里解决:点击时Bootstrap Navbar Collapse没有关闭),但后来发现这是一个JS问题——有什么想法吗?
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:
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;
});
您可以使用jQuery:而不是选择器实用程序
例如
$('a[href*=#]:not([href=#], [data-toggle=collapse])').click(function(){...})
或者在你的例子中:
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;
});
相关文章:
- JavaScript滚动脚本-在测试中激发,而不是在开发站点上
- 使用我的基于标签的平滑滚动脚本而不带“a”的解决方案
- Javascript一页滚动脚本滚动到每个点击的链接一个接一个
- 引导程序导航栏未使用平滑滚动脚本折叠
- 动画滚动脚本可防止从外部链接访问本地锚点位置
- 平滑滚动脚本问题
- 整页.js在第一个滚动脚本之后
- 锚定平滑滚动脚本跳转
- jQuery 自动缩略图滚动脚本
- JQuery- 如何使用 ALS 滚动脚本处理图像
- 自动滚动脚本不起作用
- JQuery在滚动脚本中添加setInterval()
- 如何防止JQuery脚本在自定义无限滚动脚本中重复
- 如何有效地制作滚动脚本
- 我如何才能将我的滚动脚本变成一个单独的功能
- jQuery 滚动脚本 - 为什么它在这里不起作用
- 在这个无限滚动脚本中发生了什么?
- 平滑滚动脚本和滑块不能一起工作
- JQuery滚动脚本是在我的页面底部创建自由空间
- 滚动脚本实现不工作