2016-03-31 7 views
0

Ich habe stundenlang gesucht und viele Lösungen gefunden, aber keine, die meine beheben. Ich möchte einfach die Umschalttaste, wenn angeklickt und die Menüpunkte geöffnet sind, um wieder zu schließen. Momentan, wenn ich auf den Knopf klicke, öffnet sich das Menü, aber wenn ich erneut klicke, passiert nichts.Bootstrap Navbar-Taste wird nicht geschlossen, wenn Sie auf Handy klicken

Hier Code (JS ist unten)

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

jede Hilfe dankbar.

Antwort

0

Hatte einige der Skripte in meiner <head> Abschnitt neu anordnen. Ein Teil meiner JS/JQuery wurde vor CSS geladen und verursachte das Problem.