gpt4 book ai didi

jquery - 移动菜单崩溃不适用于 scrollspy

转载 作者:太空宇宙 更新时间:2023-11-04 09:10:24 25 4
gpt4 key购买 nike

您好,当我启用移动菜单折叠时,它会停止 scrollspy 的工作。

它们都可以单独工作但不能一起工作,这是 bootstrap 的限制吗?

这是我的导航栏代码:

<body data-spy="scroll" data-target=".navbar" data-offset="80">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index.html">Davies Builders Stoke Ltd</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="navigation">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#about">About</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#services">Services</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#partners">Partners</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse.in" href="#contact">Contact</a>
</li>

</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

下面的 div 具有正确的 ID,删除:data-toggle="collapse" data-target=".navbar-collapse.in"来自每个 #navigations a使 scrollspy 正常工作。

最佳答案

bootstrap 的一个限制是不能将折叠的 .navbarscrollspy 一起使用,下面的代码解决了这个问题。

$('.navbar-collapse a').click(function (e) {
if (window.innerWidth < 768){
$('.navbar-collapse').collapse('toggle');
}
});

关于jquery - 移动菜单崩溃不适用于 scrollspy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42165986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com