我正在使用Bootstrap和一个单页网站上的折叠Navbar以及一个简单的滚动脚本,所以如果我点击单个链接页面向下滚动到锚点 - 效果很好。但是,当我点击覆盖移动设备上大量内容的链接时,Navbar不会崩溃 - 您首先必须单击令人讨厌的切换。我发现它应该有助于将数据切换和数据目标属性添加到链接,但它根本不起作用 - 我的错误在哪里?
导航:
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom" 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>
</div>
<div class="collapse navbar-collapse 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;
});
这是一个非常简单的脚本,但我不知道如何处理它以使导航栏崩溃。
答案 0 :(得分:3)
我建议您稍微关注这一点以帮助您。 http://getbootstrap.com/components/#navbar 似乎是你的基础。 主要是,当您查看@该链接时,请查看您拥有的第一个按钮行并进行比较,因为这是移动版本的主要下拉菜单,占用了您提到的大量屏幕空间。
<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>
1)我将此部分data- toggle="collapse"
更改为data-toggle="collapse"
。第3行只有一个额外的空间。
2)我在你的下拉菜单中添加了一个ID而不是一个类来识别更具体(可能无关紧要),并且还将名称更改为&#34; my-navbar-collapse&#34;这个改变是在第3行和第11行进行的。此前,这意味着你只是在相同的元素上使用同一个类两次没有意义。
3)我将课程"collapsed"
添加到位于"hvr-bounce-to-bottom"
之后的第3行的课程中。默认情况下应该允许它折叠,并且只显示是否由用户打开。
这应该有助于修复它,因为它清理它。此外,当您切换除了列出的主按钮以外的其他时,导航栏中是否有需要重新启动的下拉菜单?现在还不是这样,只是要求确保它清楚。
答案 1 :(得分:1)
使用上面的示例,对我有用的是将data-toggle =“ collapse” data-target =“。navbar-collapse”添加到外部div
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<div class="collapse navbar-collapse" id="my-navbar-collapse" toggle="collapse" data-target=".navbar-collapse">
整个菜单如下所示:
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<a class="navbar-brand" href="#">Main</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=".navbar-collapse" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/guitars">Guitars <span class="sr-only">(current)</span></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" routerLink="/nasa-image">NASA Image</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
答案 2 :(得分:1)
这对我有用:
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
答案 3 :(得分:0)
上述解决方案和JSFiddle(jsfiddle.net/camdixon/v2gosj5s)的唯一问题是,当您不在移动设备上且菜单未折叠时,菜单项会闪烁。例如。它们在适当的位置坍塌并重新打开。
重复:展开JSFiddle结果的窗口,使菜单不折叠,然后单击导航栏项。
我通过改变bootstrap.js中的崩溃数据api来解决除JSFiddle版本之外的问题,如下所示:
//Bootstrap v3.3.4
//line 662:
Collapse.prototype.toggle = function () {
//Added code:
var mq = window.matchMedia('screen and (min-width: 768px)')
if (mq.matches) return
//End added code
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
我宁愿不对最小宽度进行硬编码,但还不知道如何访问css中的媒体查询值(请参阅@ screen-sm-min in less)。
答案 4 :(得分:0)
我知道这有点迟了,即使在Bootstrap 4.0.0-alpha.6中也是如此;选择菜单项后,导航栏不会固有地关闭。 Bootsrap的文档变得更好 - 但是在选择新菜单后如何关闭导航栏没有明确的例子。
在你的html文件中 - 你去崩溃类的目标div - 我正在下面播种的div来自Bootstrap网站 - 所以没有任何改变:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
您使用该ID来监控导航栏是否展开(退出折叠模式),然后我向导航栏中的a.nav-links添加了一个点击事件,重新折叠导航栏:
$("#navbarSupportedContent").on('show.bs.collapse', function() {
$('a.nav-link').click(function() {
$("#navbarSupportedContent").collapse('hide');
});
});
答案 5 :(得分:0)
$(document).ready(function () {
$(".navbar-nav li.trigger-collapse a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
});
答案 6 :(得分:0)
这个小jquery片段以这种方式工作: 如果导航栏被展开,则什么也不会发生,因此不会闪烁(正常的引导行为)。 如果导航栏折叠,则在单击事件后,将关闭导航栏。 适用于bootstrap 4
$(".navbar a").click(function(event) {
// check if window is small enough so dropdown is created
var toggle = $(".navbar-toggler").is(":visible");
if (toggle) {
$(".navbar-collapse").collapse('hide');
}
});
.wrapper {
height: 400px;
}
#div1 {
background-color: #73683b;
}
#div2 {
background-color: #B0A084;
}
#div3 {
background-color: #E9E6FF;
}
#div4 {
background-color: #B3679B;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container px-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-0">
<a class="navbar-brand" href="#">Logo</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">
<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="#div1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div3">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#div4">Link 4</a>
</li>
</div>
</nav>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div1">
<p class="text-center">DIV 1</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div2">
<p class="text-center">DIV 2</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div3">
<p class="text-center">DIV 3</p>
</div>
<div class="container wrapper d-flex flex-column justify-content-center" id="div4">
<p class="text-center">DIV 4</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
答案 7 :(得分:0)
您只需要在导航栏代码中添加数据切换和数据目标即可。使用class =“ collapse navbar-collapse导航栏。
<div class="collapse navbar-collapse navbar-collapse" data-toggle="collapse" data-target="#navbar-collapse">
家(当前)
吉他(当前)
落下
NASA图片
另一个动作
这里还有其他
残障人士