Bootstrap下拉菜单未关闭点击

时间:2017-09-06 02:53:50

标签: html twitter-bootstrap

我们有一个使用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;
	});

提前感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

您的代码运行正常。语法错误出现在href="#"中。试试这段代码

<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"  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-->