it-swarm.com.de

Bootstrap 3 Dropdowns: bei Hover und bei Click

Fast alle Links auf meiner Navigationsleiste sind Dropdowns. Ich möchte, dass sie für große Bildschirme auf dem Hover erscheinen, für kleinere Bildschirme auf dem Klick. Ist das möglich? Bei meiner Suche nach der Antwort bin ich auf Folgendes gestoßen: Bootstrap-Menü: Dropdown auf Hover for Desktop Only . Das funktioniert bei mir nicht, weil ich nicht möchte, dass die gesamte Dropdown-Liste auf Mobilgeräten unsichtbar ist. Ich möchte, dass es nur beim Klicken und nicht beim Schweben sichtbar ist.

6
user3694391

EDITEDDie Antwort von @ ouwen-huang ist in Ordnung, aber da jQuery eine Abhängigkeit für bootstrap.js ist, können Sie es genauso gut auf die jQuery-Art und Weise tun, indem Sie einfach alle Ereignisse hinzufügen, an die Sie Anhängen möchten in Anführungszeichen, durch Leerzeichen getrennt:

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

Die Selektoren basieren auf dem Standard-Bootstrap-Markup, das wie folgt direkt aus den Dokumenten entnommen wurde:

<li class="dropdown">
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://Twitter.com/fat">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://Twitter.com/fat">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://Twitter.com/fat">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://Twitter.com/fat">Separated link</a></li>
    </ul>
</li>

Der Punkt hier ist, dass, wenn Sie sich auf einem mausfähigen Gerät wie einem Desktop ohne Touch-Funktion befinden, die Ereignisse mouseenter/mouseleave ausgelöst werden und das Menü ohne einen Klick aktiviert wird. Befindet sich der Benutzer nicht auf einem Gerät, das ein Ereignis mouseenter/mouseleave auslöst, werden die Click- oder Tap-Ereignisse ausgelöst, wenn die Person auf den Link tippt und der Click- oder Tap-Handler den Dropdown-Schalter bedient.

BEARBEITET für Genauigkeit.

13
jme11

Die anderen 2 Lösungen funktionieren, aber das Bootstrap-Styling bleibt nicht erhalten. Eine einfachere Lösung ist das Hinzufügen der Klasse 'open'.

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});
7
// toggle dropdown on mouse hover, click and tap events
$('.dropdown').on('mouseenter mouseleave click tap touchstart', function(event) {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).dropdown('toggle');
    }
});

Hier ist eine leicht modifizierte Version von @ jme11s Antwort, die auf der Bootstrap 3-Dokumentation für Javascript-Dropdowns basiert. Der Vorteil dieser Methode besteht darin, dass die Dropdown-Liste genau wie vorgesehen funktioniert, ohne dass Klassen geändert werden müssen, und ist daher sauberer, IMO.

Codepen Beispiel

1
Lucas L Jordan

Eine gute Möglichkeit, dies zu erreichen, besteht darin, den Schwebeflug nur zu aktivieren, wenn das Menü nicht ausgeblendet ist.

$('.dropdown').on('mouseenter mouseleave click tap', function(event) {
  if (!$('.navbar-toggle').is(':visible')) {
    $(this).toggleClass("open");
  }
});
1
paddyfields

Sie können dafür Javascript-Ereignisse verwenden.

Mit der Mobile Check Library können Sie sagen

var domObject = document.querySelector('.myClassOrIDWhateverFloatsYourBoat');
if(mobile checked is true){
    domObject.addEventListener('hover', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}else{
   domObject.addEventListener('click', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}
1
Ouwen Huang

Nachdem ich viele Plugins und Lösungen ausprobiert hatte, die über stackoverflow veröffentlicht wurden, kam ich zu einem ziemlich einfachen Code, der:

  • zeigt Dropdown beim Hover nach nativer Bootstrap-Klasse (funktioniert also gut mit dem Klicken auf eine Schaltfläche)
  • lässt den Button Link funktionieren, wenn href gesetzt ist
  • behält das ursprüngliche Verhalten auf Mobilgeräten bei

Einfache Version

$('ul.nav li.dropdown').hover(function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', true);
    }
}, function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', false);
    }
});
$('ul.nav li.dropdown a').click(function(){
    if (!$('.navbar-toggle').is(':visible') && $(this).attr('href') != '#') {
        $(this).toggleClass('open', false);
        window.location = $(this).attr('href')
    }
});

$('.navbar-toggle').is(':visible') prüft, ob wir uns derzeit in der mobilen Ansicht befinden, $(this).toggleClass('open', true) fügt die von bootstrap verwendete CSS-Klasse open hinzu oder entfernt sie und window.location = $(this).attr('href') sendet den Benutzer an den im Link href festgelegten Ort.


Um jQuery-Übergänge hinzuzufügen, müssen wir das Skript ein wenig modifizieren.

Geänderte Version

visible = false;

function toggleDropdown(dropdown, delay, fade, state) {
    if (state === undefined) visible = !visible
    else visible = state

    dropdown.children('.dropdown-menu').stop(true, true).delay(delay)[visible ? 'fadeIn' : 'fadeOut'](fade, function() {
        dropdown.toggleClass('open', visible);
        dropdown.children('.dropdown-toggle').attr('aria-expanded', visible);
        $(this).css('display', '');
    });
}

$('ul.nav li.dropdown').hover(function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 50, 100, true)
}, function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 400, 200, false)
});

$('ul.nav li.dropdown a').click(function(){
    if ($('.navbar-toggle').is(':visible')) return;
    if ($(this).attr('href') != '#') {
        toggleDropdown($(this).parent(), 50, 100, false)
        window.location = $(this).attr('href')
    }
    else {
        toggleDropdown($(this).parent(), 50, 100)
    }
});

visible variable sorgt dafür, dass beim erneuten Bewegen der Maus alles gut funktioniert, während die Animation ausgeführt wird.

1
Paul

Dies ist einfach und funktioniert gut, aber auf Mobilgeräten wird ein Untermenü, das Sie öffnen und zum Schließen auf den Menüpunkt klicken, nicht geschlossen

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});
0
Maggie Murry

Für Bootstrap 4 funktioniert folgender Code.

$('.dropdown').on('mouseenter mouseleave click tap', function() {
    $(this).toggleClass("show");
});
0
Stillmatic1985