2017-02-10 8 views
0

こんにちは、私はモバイルメニューの折りたたみを有効にすると、scrollspyの動作を停止します。mobile menu collapseがscrollspyで動作しない

これらはどちらも個別に正常に動作しますが、一緒に動作するわけではありませんが、これはブートストラップの制限ですか?

これは私のナビゲーションバーコードです:data-toggle="collapse" data-target=".navbar-collapse.in"#navigations a原因のそれぞれから正常に動作するscrollspy:

<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を持っています。

答えて

0

ブートストラップの制限では、縮みを.navbarscrollspyと使用できないため、次のコードでその問題を解決しています。

$('.navbar-collapse a').click(function (e) { 
    if (window.innerWidth < 768){ 
     $('.navbar-collapse').collapse('toggle'); 
    } 
    }); 
関連する問題