2016-03-31 12 views
0

私は何時間も探していましたが、解決策はたくさんありましたが、私はそれを修正しませんでした。私は単にクリックしてトグルボタンを押してメニュー項目を開いて、もう一度閉じるようにします。現在、ボタンをクリックするとメニューが開きますが、もう一度クリックすると何も起こりません。ここでモバイルのクリックでブートストラップNavbarボタンが閉じることはありません

コード(JSが一番下にある)

<body data-spy="scroll" data-target=".navbar" data-offset="59"> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> 
      <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"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown"> 
      <a href="#" class="btn btn-default dropdown-toggle seller-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Sellers <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#option1" data-target="#option1">Option 1</a></li> 
       <li><a href="#option2" data-target="#option2">Option 2</a></li> 
       <li><a href="#option3" data-target="#option3">Option 3</a></li>    
      </ul> 
      </li><!--/.dropdown--> 
      <li> <%= link_to "See More", more_path, class: 'btn btn-primary xyz-button' %><br /> </li>   
      <li><%= link_to "Login", new_user_session_path, class: "btn btn-warning" %></li> 

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

    <script> 
     $(document).ready(function() { 
     $('.popup-with-zoom-anim').magnificPopup({ 
     type: 'inline', 
     fixedContentPos: false, 
     fixedBgPos: true, 
     overflowY: 'auto', 
     closeBtnInside: true, 
     preloader: false, 
     midClick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
     }); 

     }); 
    </script> 



    <script> 
     $(document).on('click',function(){ 
     $('.collapsed').collapse('hide'); 


     }) 
    </script> 
    <script> 
     $(function(){ 
     var navMain = $("#nav-main"); 
     navMain.on("click", "a", null, function() { 
      navMain.collapse('hide'); 
     }); 
    }); 
    </script> 

    <script> 
     $('.navbar-collapse a').click(function(){ 
     $(".navbar-collapse").collapse('hide'); 
     }); 
    </script>  

<%= yield %> 

</body> 

任意の助けに感謝です。

答えて

0

私の<head>セクションにあるスクリプトの一部を並べ替える必要がありました。私のJS/JQueryのいくつかは、CSSの前にロードして問題を作成していました。

関連する問題