it-swarm.com.de

Twitter Bootstrap mobile nav: Das Menü wird nach dem Klicken auf den Menülink ausgeblendet

Ich suche nach einer Möglichkeit, die Twitter Bootstrap Mobile-/Tablet-Navigation automatisch ein-/auszublenden, nachdem Sie auf einen Menü-Link geklickt haben. Ich habe viele Menüpunkte. Wenn Benutzer das Menü in iPhone erweitern, sehen sie nur das Menü und nicht die darunter liegende Seite. Dies verwirrt den Benutzer, wenn er auf einen Menü-Link klickt. Es scheint, als sei nach dem Klicken nichts passiert. 

Ein großes Dankeschön und eine Umarmung an alle, die mich damit in die richtige Richtung weisen können!

18
bjornfloki

Wenn Sie BS3.x verwenden, können Sie das mobile Navigationsgerät mit einem solchen Markup ausblenden. Beachten Sie die Markierungen "Data-Toggle" und "Data-Target" im Markup für den Home-Link:

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

Sie können das mobile Nav wie folgt auch über ein Skript reduzieren:

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

Dieser Ansatz erfordert absolut kein zusätzliches Markup. Jedes Mal, wenn ein Link in der Navigation angeklickt wird, wird die Navigationsleiste umgeschaltet. 

Prost.

20
user2562923

Der einfachste Weg, den ich gefunden habe, ist die Verwendung der Datenattribute auf allen Navbar-Links, bei denen das Zusammenfallen der mobilen Navbar gewünscht wird. Verwenden Sie data-target=".navbar-collapse.in", damit die Navigationsleiste nur im geöffneten Zustand umschaltet und nicht bei jedem Klicken auf den Link.

<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>

http://codeply.com/go/bp/lbIb5ZaHbq

13
Zim

Die Navigation sollte immer dann geschlossen werden, wenn ein Benutzer irgendwo auf den Körper klickt - nicht nur Navigationselemente. Angenommen, das Menü ist geöffnet, der Benutzer klickt jedoch in den Seitenkörper. Der Benutzer erwartet, dass das Menü geschlossen wird. 

Sie müssen auch sicherstellen, dass die Umschalttaste sichtbar ist. Andernfalls wird ein Sprung im Menü angezeigt.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});
9
Charlie Dalsass

Beispiel Markup wie in der Bootstrap Dokumentation :

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

Schließen Sie den Menüpunkt Klick

Fügen Sie Ihrem Javascript entsprechend hinzu:

$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

Alternative: Schließen Sie mit einem Klick

Wie von Charlie Dalsass vorgeschlagen, ist es möglicherweise vorzuziehen, das Menü zu schließen, wenn Sie auf die Seite klicken. Dafür können Sie das obige Javascript durch Folgendes ersetzen:

$('body').click(function(e) {
    // don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

Noch sauberer imo wäre, diesen Handler zu binden und zu lösen, wenn das Menü geöffnet/geschlossen wird, und es zu vermeiden, den Handler bei jedem Klick des Benutzers umsonst auszuführen. Es ist jedoch sehr unwahrscheinlich, dass dies spürbare Auswirkungen hat.


Ich habe ein Stack-Exchange-Konto erstellt, nur um die Antwort von Skelly zu bestätigen. Dann habe ich herausgefunden, wie man ohne Reputation nicht aufsteigen kann. Dann fand ich heraus, wie diese Lösung ScrollSpy zerstört. Nun, dies ist die Lösung, die für mich ohne unerwünschte Nebenwirkungen am besten funktioniert.

3
Arsylum

Für den Fall, dass jemand anderes interessiert ist, habe ich anderswo eine Lösung gefunden. Es ist wunderschön einfach.

Fügen Sie diese ID Ihrem Markup hinzu:

<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

Und füge dies zu deiner JS hinzu:

$('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });
1
bjornfloki

Wenn Sie ein Untermenü verwenden, müssen Sie den Code von @ user2562923 wie folgt ändern:

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });
1
Eranda

Beachten Sie, dass der Ansatz zum Hinzufügen der Datenumschalt- und Datenzielattribute zum Ankerelement nicht mit der konfigurierten Bildlaufspalte funktioniert. Der ScrollSpy von BS kann den Menüpunkt nicht mehr aktivieren.

0
Tarabass