Programatically wechseln Bootstrap 3 Navigationsleiste

Question

ich einige Einzelteile in meinem Bootstrap 3 Navigationsleiste bin mit wie unten zusammengefasst in:

<nav class="navbar navbar-inverse navbar-fixed-top" id="toggleNav" role="navigation"> 
     <!-- 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-ex1-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="#">Brand name</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse">     
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="javascript:logout();"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Logout</a> 
       </li> 
       <li> 
        <a href="#" id="online-offline" toggle="offline"><span class="glyphicon glyphicon-off"></span>&nbsp;Go offline</a> 
       </li> 
      </ul>     
     </div><!-- /.navbar-collapse --> 
    </nav> 

Wenn ich auf dem zweiten Element klicken ('Go offline') I jquery verwenden aufzurufen ein modales Fenster. Auf Mobilgeräten muss ich zuerst das Menü minimieren, um den Link zu erreichen. Wenn ich dann auf dieses Element klicke, wird mein modales Fenster korrekt angezeigt.

Was ich erreichen muss, ist das Ausblenden des Navbar-Einsturzes, bevor das Modal angezeigt wird. Ist es möglich, den Navbar-Kollaps programmatisch umzuschalten? Wie kann ich das machen ?

Florin.

Answer 1

Nach ein wenig Hilfe von @ Jahnux73 habe ich es selbst herausgefunden. Das einzige, was ich tun musste, ist hinzuzufügen:

data-toggle="collapse" data-target=".navbar-ex1-collapse" 

die spezifische Verbindung, die ich die Navigationsleiste wechseln wollte. so sieht der Link jetzt wie folgt aus:

<a href="#" id="online-offline" data-toggle="collapse" 
    data-target=".navbar-ex1-collapse" toggle="offline"> 
    <span class="glyphicon glyphicon-off"></span>&nbsp;Go offline 
</a> 

Answer 2

Wie Sie bereits gesagt haben, wird das Ereignis modal ausgeführt.

Also, wenn Ihr modal (genannt yourModal) (vor dem Anzeigen) angezeigt wird, verstecken gerade das Menü:

JS:

$('.yourModal').on('show.bs.modal', function(){ 
    $('.navbar-collapse').collapse('hide'); 
}); 

Hier sind die docs:

http://getbootstrap.com/javascript/#collapse

http://getbootstrap.com/javascript/#modals-usage