【发布时间】：2018-02-14 09:41:03
【问题描述】：
我们有一个使用 OctoberCMS 构建的单页响应式网站，除了一个小问题外，一切似乎都运行良好。导航栏有一个下拉菜单，当您单击或点击其中的项目时，该菜单不会自动关闭。在桌面上，您必须单击页面上的任意位置才能关闭它，而在移动设备上，您需要再次单击菜单按钮。只是寻找正确的方法来设置它。这是当前的代码块，请注意我们在网站上使用的是 bootstrap 3.3.1：
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<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="#home"><img src="{{ 'assets/images/logo.png'|theme }}" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="scroll active"><a href="#home">Home</a></li>
<li class="scroll dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" role="button">Main Menu 2<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#1">Section 1</a></li>
<li><a class="dropdown-item" href="#2">Section 2</a></li>
<li><a class="dropdown-item" href="#3">Section 3</a></li>
</ul>
</li>
<li class="scroll"><a href="#main3">Main Menu 3</a></li>
<li class="scroll"><a href="#main4">Main Menu 4</a></li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->在开发者控制台中查看时，我看到以下错误：
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:21)
at Function.each (jquery.js:4)
at init.each (jquery.js:4)
at Scroll (main.js:20)
at main.js:5
at dispatch (jquery.js:5)
at v.handle (jquery.js:5)这是 main.js 文件中的滚动代码：
function Scroll() {
var contentTop = [];
var contentBottom = [];
var winTop = $(window).scrollTop();
var rangeTop = 200;
var rangeBottom = 500;
$('.navbar-collapse').find('.scroll a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top);
contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
})
$.each( contentTop, function(i){
if ( winTop > contentTop[i] - rangeTop ){
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
}
})
};
$('#tohash').on('click', function(){
$('html, body').animate({scrollTop: $(this.hash).offset().top - 5}, 1000);
return false;
});提前感谢您提供的任何帮助。
【问题讨论】：
-
我知道这是您使用的引导版本的次要版本，但我可以单击下拉菜单并下拉项目以关闭菜单。这是一个codeply project，它实现了您可以查看的代码。
-
你是否包含了 jquery？由于引导 css 依赖于 jquery 来处理某些事件
-
是的，我包括了 jquery。我今天玩得更多，看起来我们使用的 10 月 CMS 主题中的 js 发生了一些奇怪的事情。将发布错误和似乎导致上述问题的代码。