Frage Bootstrap nahe responsive Menü "on click"


Auf "PRODUKTE" klicken Sie auf ein weißes Div (siehe Anhang). Wenn ich reaktionsschnell bin (Handy und Tablet), möchte ich die reaktive Navigationsleiste automatisch schließen und nur den weißen Balken anzeigen.

Ich habe es versucht:

$('.btn-navbar').click();  

auch versucht:

$('.nav-collapse').toggle();

Und es funktioniert. Aber in der Desktop-Größe wird es auch aufgerufen und macht etwas funky zum Menü, wo es für eine Sekunde schrumpft.

Irgendwelche Ideen?

enter image description here


74
2018-01-07 20:10


Ursprung


Antworten:


Ich habe es mit Animation zu tun!

Menü in HTML:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Binding click event für alle Elemente in der Navigation zum Minimierungsmenü (Bootstrap collapse plugin):

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

BEARBEITEN Um es generischer zu machen, können wir folgendes Code-Snippet verwenden

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

83
2018-06-26 10:09



Sie müssen kein zusätzliches Javascript hinzufügen, das bereits in der Bootstraps-Reduzierungsoption enthalten ist. Stattdessen schließen Sie einfach Datenauswahl- und Datenziel-Selektoren in Ihre Menülistenelemente ein, genau wie Sie es mit der Navigationsschaltfläche tun. Für Ihren Menüpunkt Produkte würde es so aussehen

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Dann müssten Sie die Datenauswahl- und Datenziel-Selektoren für jeden Menüeintrag wiederholen

BEARBEITEN!!! Um Overflow-Probleme und Flimmern bei diesem Update zu beheben, füge ich noch mehr Code hinzu, der dies korrigiert und noch kein zusätzliches Javascript hat. Hier ist der neue Code:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Hier ist es bei der Arbeit http://jsfiddle.net/jaketaylor/84mqazgq/

Dadurch werden die Umschalt- und Zielwahlschalter für die Bildschirmgröße spezifisch und Störungen im größeren Menü beseitigt. Wenn jemand immer noch Probleme mit Pannen hat, lass es mich wissen und ich werde eine Lösung finden. Vielen Dank


121
2018-02-13 02:29



Ich denke, Sie sind alle über Engineering ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

BEARBEITEN: Um auf Untermenüs zu achten, stellen Sie sicher, dass der Toggle-Anker die Dropdown-Umschaltklasse hat.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

BEARBEITEN SIE 2: Fügen Sie Unterstützung für Telefon berühren hinzu.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

37
2018-04-19 14:59



Ich mochte Jake Taylors Idee, dies ohne zusätzliches JavaScript zu tun und den Bootstrap-Minimierungs-Toggle zu nutzen. Ich habe festgestellt, dass Sie das "flackernde" Problem beheben können, wenn das Menü nicht im ausgeblendeten Modus ist, indem Sie das Menü ändern data-target Selektor leicht mit einzuschließen in Klasse. So sieht es aus:

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

Ich habe es nicht mit verschachtelten Dropdowns / Menüs getestet, also YMMV.


33
2017-09-20 23:36



Das funktioniert, animiert aber nicht.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

4
2018-01-07 22:27



Ich nehme an, dass Sie eine Linie wie diese haben, die den nav-Bereich definiert, basierend auf Bootstrap-Beispielen und allem

<div class="nav-collapse collapse" >

Fügen Sie einfach die Eigenschaften als solche hinzu, wie auf der Schaltfläche MENU

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

Ich habe hinzugefügt <body> auch, gearbeitet. Ich kann nicht sagen, dass ich es profiliert habe oder so, aber es scheint mir ein Vergnügen zu sein ... bis Sie auf einen beliebigen Punkt der Benutzeroberfläche klicken, um das Menü zu öffnen, also nicht so gut, dass.

DK


4
2018-06-21 19:37



nur um vollständig zu sein, in Bootstrap 4.0.0-Beta mit .Show hat für mich gearbeitet ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

4
2017-08-22 13:15



Im HTML habe ich eine Klasse von hinzugefügt Navigationslink zum ein Tag jeder Navigationsverbindung.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

3
2018-04-20 18:12



diese lösung hat eine gute arbeit, auf dem desktop und mobil.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

3
2017-12-12 14:28



Um die Lösung von user1040259 zu buchstabieren, fügen Sie diesen Code zu Ihrem $ (document) .ready (function () {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

Wie sie erwähnen, animiert dies nicht die Bewegung ... aber es schließt die Navigationsleiste bei der Artikelauswahl


2
2018-06-20 13:15



Für diejenigen, die AngularJS und Angular UI Router verwenden, hier ist meine Lösung (mit Mollwe's Toggle). Wobei ".navbar-main-collapse" mein "Datenziel" ist.

Richtlinie erstellen:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

Richtlinie verwenden:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

2
2017-11-20 17:38