So erstellen Sie ein Dropdown-Menü für das Twitter-Bootstrap-Menü beim Hover anstatt beim Klicken

1181

Ich möchte, dass mein Bootstrap-Menü beim Hover automatisch herunterfällt, anstatt auf den Menütitel klicken zu müssen. Ich möchte auch die kleinen Pfeile neben den Menütiteln verlieren.

ins Wanken geraten
quelle
9
Dafür gibt es eine Lösung, daher ist die Antwort von mikko korrekt, wird aber jetzt mit einem Plugin für genau diese Situation abgedeckt. Bootstrap-Hover-Dropdown
HenryW
2
Sehen Sie sich mein neu veröffentlichtes Plugin an, das die Probleme der folgenden CSS- und JS-Lösungen verhindert und unter iOS und modernen Desktop-Browsern mit Touch-Ereignissen einwandfrei funktioniert. Sogar die Arienattribute funktionieren damit gut: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
István Ujj-Mészáros
Ich habe ein reines CSS3-Dropdown mit einer Bootstrap-Navigationsleiste erstellt und es auf CodePen Pure CSS3 Dropdown
Gothburz
18
Überlegen Sie zweimal, ob Sie es wirklich brauchen? Bootstrap wird für adaptive Sites verwendet. Dies bedeutet, dass sie auch auf Geräten mit Touch-Steuerung verwendet werden. Deshalb ist es so gestaltet. Auf Touchscreens gibt es kein "Hover".
Serj.by
Mögliches Duplikat von Bootstrap Dropdown mit Hover
Slugster

Antworten:

590

Ich habe ein reines Dropdown-Menü für den Schwebeflug erstellt, das auf dem neuesten (v2.0.2) Bootstrap-Framework basiert und mehrere Untermenüs unterstützt, und dachte, ich würde es für zukünftige Benutzer veröffentlichen:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Demo

Andres Ilich
quelle
54
Es ist eine Designentscheidung in Bootstrap, die Dropdowns beim Hover-Ereignis nicht zu öffnen ...
caarlos0
18
so gut! Ich habe auch entfernt, class="dropdown-toggle" data-toggle="dropdown"damit nur das Schweben, nicht das Klicken das Menü auslöst. Beachten Sie, dass bei Verwendung von Responsive-Stilen die Menüs immer noch in die kleine Schaltfläche oben rechts verschoben werden, die immer noch durch einen Klick ausgelöst wird. Vielen Dank!
ptim
11
Um das automatische Dropdown auf kleineren Geräten (wie Telefonen) zu vermeiden und es nur ab einer Mindestbreite von z. B. 768px zuzulassen, tun Sie@media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
Chris Aelbrecht
1
Um die Verknüpfung mit untergeordneten Elementen anklickbar zu machen, müssen Sie das "data-toggle = 'dropdown'" auf dem <a> -Tag entfernen.
joan16v
2
Hier ist ein Code, der mit der neuesten Bootstrap 3-Version funktioniert
Stefan Gruenwald
910

Damit das Menü beim Hover automatisch abfällt, kann dies mit einfachem CSS erreicht werden. Sie müssen den Selektor auf die ausgeblendete Menüoption einstellen und ihn dann so einstellen, dass er als Block angezeigt wird, wenn Sie mit der liMaus über das entsprechende Tag fahren. Das Beispiel aus der Twitter-Bootstrap-Seite lautet wie folgt:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Wenn Sie jedoch die reaktionsschnellen Funktionen von Bootstrap verwenden, möchten Sie diese Funktionalität nicht in einer reduzierten Navigationsleiste (auf kleineren Bildschirmen). Um dies zu vermeiden, schließen Sie den obigen Code in eine Medienabfrage ein:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Um den Pfeil (Caret) auszublenden, erfolgt dies auf unterschiedliche Weise, je nachdem, ob Sie Twitter Bootstrap Version 2 und niedriger oder Version 3 verwenden:

Bootstrap 3

Um das Caret in Version 3 zu entfernen, müssen Sie nur den HTML-Code <b class="caret"></b>aus dem .dropdown-toggleAnkerelement entfernen :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & niedriger

Um das Caret in Version 2 zu entfernen, benötigen Sie etwas mehr Einblick in CSS. Ich schlage vor, die Funktionsweise des :afterPseudoelements genauer zu untersuchen. Um Ihnen den Weg zum Verständnis zu erleichtern, die Pfeile im Twitter-Bootstrap-Beispiel anzuvisieren und zu entfernen, verwenden Sie den folgenden CSS-Selektor und Code:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Es wird zu Ihren Gunsten funktionieren, wenn Sie genauer untersuchen, wie diese funktionieren, und nicht nur die Antworten verwenden, die ich Ihnen gegeben habe.

Vielen Dank an @CocaAkat für den Hinweis, dass wir den untergeordneten Kombinator ">" vermisst haben, um zu verhindern, dass Untermenüs auf dem übergeordneten Hover angezeigt werden

Mein Kopf tut weh
quelle
79
margin: 0;Musste auch hinzufügen , sonst verursacht der 1px Rand oben fehlerhaftes .dropdown-menuVerhalten.
Salman von Abbas
12
Einfache Lösung, aber der übergeordnete Link ist immer noch nicht anklickbar. Ich verwende den neuesten Bootstrap mit Roots-Thema.
Krunal
5
Hinweis: Ja, dies funktioniert in jedem Browser, den Twitter Bootstrap unterstützt. @GeorgeEdison Dies ist grundlegendes CSS - welcher Teil würde von IE8 nicht unterstützt? Wenn Sie Probleme haben, posten Sie eine Frage und keine irreführenden Kommentare.
Mein Kopf tut weh
3
@MyHeadHurts: Nach einigen weiteren Nachforschungen stellte sich heraus, dass dies tatsächlich ein Bootstrap-Fehler war und erst vor fünf Tagen behoben wurde.
Nathan Osman
5
@Krunal Um auf den Link klicken zu können, müssen Sie das data-toggle="dropdown"Attribut entfernen .
Pherrymason
230

Zusätzlich zu der Antwort von "My Head Hurts" (was großartig war):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Es gibt zwei verbleibende Probleme:

  1. Durch Klicken auf den Dropdown-Link wird das Dropdown-Menü geöffnet. Und es bleibt geöffnet, es sei denn, der Benutzer klickt auf eine andere Stelle oder schwebt wieder darüber, wodurch eine unangenehme Benutzeroberfläche entsteht.
  2. Zwischen dem Dropdown-Link und dem Dropdown-Menü befindet sich ein Abstand von 1 Pixel. Dadurch wird das Dropdown-Menü ausgeblendet, wenn Sie langsam zwischen Dropdown- und Dropdown-Menü wechseln.

Die Lösung für (1) besteht darin, die Elemente "class" und "data-toggle" aus dem Navigationslink zu entfernen

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Auf diese Weise können Sie auch einen Link zu Ihrer übergeordneten Seite erstellen - was mit der Standardimplementierung nicht möglich war. Sie können einfach das "#" durch eine beliebige Seite ersetzen, die Sie dem Benutzer senden möchten.

Die Lösung für (2) besteht darin, den oberen Rand der Menüauswahl .dropdown-menu zu entfernen

.navbar .dropdown-menu {
    margin-top: 0px;
}
Cory Preis
quelle
15
Um das absichtliche Klicken zu beheben, habe ich gerade das data-toggle="dropdown"Attribut entfernt, das zu funktionieren schien.
Anthony Briggs
5
Lösung (2) für Navi-Pillen-Knöpfe:.nav-pills .dropdown-menu { margin-top: 0px; }
Loren
1
Um das Problem zu beheben, habe ich oben li.dropdown notiert: hover> ul.dropdown-menu
Archimedes Trajano
12
Wenn
1
Wenn Sie das Attribut data-toggle = "dropdown" entfernt haben, können Sie das Dropdown-Menü nicht über die Tastatur erweitern. Es wird also nicht 508-konform sein. Wie können Sie den Klick deaktivieren, aber die Tastaturfunktionalität beibehalten?
duyn9uyen
130

Ich habe ein bisschen jQuery verwendet:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
John Montgomery
quelle
13
So was. Ich verwende JQuery sowieso mit dem Bootstrap-Zeug und erlaube immer noch die Standard-Klick-Funktionalität in Touchscreen-Geräten.
Ente in Vanillepudding
Benutzte dies. Ich mag es, dass es auch weiterhin die Klickfunktion für Handys erlaubt, aber für Desktops ist der Hover perfekt.
Stuart
1
Ich habe dies verwendet, es aber auch erweitert, um es für Dropdowns zu verwenden, die sich nicht in einem Navigationsgerät befinden. Ich füge der btn-group div einen Klassen-Dropdown-Hover hinzu und verwende diesen jQuery-Finder $ ('ul.nav li.dropdown, .dropdown-hover'). Hover (function () {. Danke!
Brandon
Benutzte dieses, nett und klein. Die CSS-Version erlaubte nicht, dass das Untermenü angezeigt wurde, und 200 ms waren zu schnell, also änderte ich es in $('ul.nav li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut().hover(function() { $(this).stop(true, true); }); });: Wenn das Untermenü schwebt, stoppen Sie fadeOut
Damien
Dies scheint nicht mit jqLite zu funktionieren, das in anguraljs enthalten ist
nuander
70

Hier gibt es viele wirklich gute Lösungen. Aber ich dachte, ich würde meine hier als weitere Alternative einsetzen. Es ist nur ein einfaches jQuery-Snippet, das es wie Bootstrap macht, wenn es Hover für Dropdowns unterstützt, anstatt nur zu klicken. Ich habe dies nur mit Version 3 getestet, daher weiß ich nicht, ob es mit Version 2 funktionieren würde. Speichern Sie es als Snippet in Ihrem Editor und haben Sie es auf Knopfdruck.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Grundsätzlich heißt es nur, wenn Sie mit der Maus über die Dropdown-Klasse fahren, wird die offene Klasse hinzugefügt. Dann funktioniert es einfach. Wenn Sie aufhören, entweder mit der Dropdown-Klasse über dem übergeordneten Li oder mit dem untergeordneten ul / li zu schweben, wird die offene Klasse entfernt. Offensichtlich ist dies nur eine von vielen Lösungen, und Sie können sie hinzufügen, damit sie nur für bestimmte Instanzen von .dropdown funktioniert. Oder fügen Sie einen Übergang zu einem Elternteil oder einem Kind hinzu.

Stereowissenschaften
quelle
2
Tolle Lösung! Ich habe auch das Attribut data-toggle = "dropdown" aus dem Link entfernt, um den oberen Link anklickbar zu machen.
Sergey
Das ist ein guter Tipp, Sergey. Ich stelle immer sicher, dass der Top-Link nirgendwohin führt, damit er auch auf Tablets und Handys funktioniert.
stereoscience
1
@ Sergey Ich würde das nicht empfehlen. Sie würden die Funktionalität für mobile Benutzer unterbrechen. Sie können die Hover-Funktion nicht zum Öffnen eines Menüs verwenden und müssen darauf klicken können.
Paul
2
Dies ist erstaunlich kurz und einfach, während es dennoch mit Touchscreens abwärtskompatibel ist. Sollte viel mehr positiv bewertet werden.
Max
Das sieht wirklich gut aus. Haben Sie eine Idee, wie Sie mithilfe von CSS-Übergängen ein wenig Animation hinzufügen können?
Fred Rocha
69

Passen Sie einfach Ihren CSS-Stil in drei Codezeilen an

.dropdown:hover .dropdown-menu {
   display: block;
}
Ranjith
quelle
22

Wenn Sie ein Element mit einer dropdownKlasse wie dieser haben (zum Beispiel):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Mithilfe dieses Ausschnitts aus jQuery-Code können Sie das Dropdown-Menü beim Hover-Over automatisch herunterklappen lassen, anstatt auf den Titel klicken zu müssen:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Hier ist eine Demo

Diese Antwort stützte sich auf die Antwort von @Michael . Ich habe einige Änderungen vorgenommen und einige Ergänzungen hinzugefügt, damit das Dropdown-Menü ordnungsgemäß funktioniert

Amr
quelle
Perfekt. Vielen Dank.
Antikbd
20

[Update] Das Plugin ist auf GitHub und ich arbeite an einigen Verbesserungen (wie die Verwendung nur mit Datenattributen (kein JS erforderlich). Ich habe den Code unten belassen, aber er ist nicht derselbe wie der auf GitHub.

Ich mochte die reine CSS-Version, aber es ist schön, eine Verzögerung zu haben, bevor sie geschlossen wird, da dies normalerweise eine bessere Benutzererfahrung ist (dh nicht für einen Mausbeleg bestraft wird, der 1 Pixel außerhalb des Dropdowns liegt usw.), und wie in den Kommentaren erwähnt , gibt es diesen 1px Rand, mit dem Sie sich befassen müssen, oder manchmal wird das Navigationssystem unerwartet geschlossen, wenn Sie von der ursprünglichen Schaltfläche zum Dropdown-Menü wechseln usw.

Ich habe ein schnelles kleines Plugin erstellt, das ich auf einigen Websites verwendet habe, und es hat gut funktioniert. Jedes Navigationselement wird unabhängig behandelt, sodass es über eigene Verzögerungszeitgeber usw. verfügt.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

Der delayParameter ist ziemlich selbsterklärend und instantlyCloseOthersschließt sofort alle anderen Dropdowns, die geöffnet sind, wenn Sie mit der Maus über einen neuen fahren.

Kein reines CSS, aber hoffentlich hilft es jemand anderem zu dieser späten Stunde (dh dies ist ein alter Thread).

Wenn Sie möchten, können Sie die verschiedenen Prozesse sehen, die ich durchlaufen habe (in einer Diskussion im #concrete5IRC), damit es über die verschiedenen Schritte in dieser Übersicht funktioniert: https://gist.github.com/3876924

Der Plugin-Pattern-Ansatz ist viel sauberer, um einzelne Timer usw. zu unterstützen.

Weitere Informationen finden Sie im Blogbeitrag .

CWSpear
quelle
16

Das hat bei mir funktioniert:

.dropdown:hover .dropdown-menu {
    display: block;
}
Amay Kulkarni
quelle
1
Mit Handy ist es jedoch seltsam.
Radmation
Der Abstand zwischen Menü und Dropdown-Menü macht dies unbrauchbar.
Antikbd
15

Dies ist in Bootstrap 3 integriert. Fügen Sie dies einfach Ihrem CSS hinzu:

.dropdown:hover .dropdown-menu {
    display: block;
}
BSUK
quelle
10

Noch besser mit jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});
caarlos0
quelle
3
Ich habe Ihren Code jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).closest('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).closest('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); });so geändert, dass das Untermenü beim Hover nicht angezeigt wird.
Farjam
Dieser Code funktioniert mit den neuesten Versionen nicht mehr.
Paul
9

Sie können die Standardmethode $().dropdown('toggle')verwenden, um das Dropdown-Menü beim Hover umzuschalten:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});
sdvnksv
quelle
9

Ich möchte nur hinzufügen, dass Sie schreiben sollten, wenn Sie mehrere Dropdowns haben (wie ich):

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Und es wird richtig funktionieren.

Maxim Filippov
quelle
Mein .dropdown-Menü hatte, margin: 2px 0 0;was bedeutete, dass ein langsamer MouseEnter von oben das Menü vorzeitig versteckte. ul.dropdown-menu{ margin-top: 0; }
Alastair
8

Meiner Meinung nach ist der beste Weg so:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Beispiel-Markup:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>
Alex
quelle
5
Dies ist Cameron Spears Arbeit, dachte ich würde ihm den Ruf
Kelpie
8

Der beste Weg, dies zu tun, besteht darin, das Klickereignis von Bootstrap einfach mit einem Hover auszulösen. Auf diese Weise sollte es weiterhin berührungsgerätefreundlich bleiben.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
Mark Williams
quelle
Unerwünschtes Ergebnis: Maus, Klick und Mouseout lassen das Menü offen. Das ist nicht was ich will ...
Wietse
Mit dieser Funktion wird die Bootstrap-Funktion ausgeführt, um das Dropdown-Menü zu öffnen. Diese Funktion führt viele andere Aufgaben aus, z. B. aria-
expand
7

Ich habe es wie folgt geschafft:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Ich hoffe das hilft jemandem ...

Mehdi Maghrooni
quelle
5

Außerdem wurde Rand oben hinzugefügt: 0, um den Bootstrap-CSS-Rand für das .dropdown-Menü zurückzusetzen, damit die Menüliste nicht verschwindet, wenn der Benutzer langsam vom Dropdown-Menü zur Menüliste schwebt.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}
Sudharshan
quelle
2
Dies ist die richtige Antwort. Der Bootstrap kann beim Dropdown zum Schweben gebracht werden, wenn die Maus das Dropdown-Menü nicht verlässt. Durch Entfernen des oberen Randes können Sie ohne Unterbrechung und ohne automatisches Schließen des Menüs vom Link zum Menü wechseln. Und diese Lösung ermöglicht es, das richtige Verhalten für Touch-Geräte
beizubehalten
5

Dies ist wahrscheinlich eine dumme Idee, aber um nur den nach unten zeigenden Pfeil zu entfernen, können Sie den löschen

<b class="caret"></b>

Dies tut jedoch nichts für den nach oben weisenden ...

stinaq
quelle
5

Ich habe ein geeignetes Plugin für die Dropdown-Hover-Funktion von Bootstrap 3 veröffentlicht, in dem Sie sogar definieren können, was beim Klicken auf das dropdown-toggleElement passiert (der Klick kann deaktiviert werden):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover


Warum habe ich es geschafft, wenn es bereits viele Lösungen gibt?

Ich hatte Probleme mit allen zuvor vorhandenen Lösungen. Die einfachen CSS verwenden die .openKlasse nicht auf der.dropdown , sodass keine Rückmeldung zum Dropdown-Umschaltelement erfolgt, wenn das Dropdown-Menü sichtbar ist.

Die js stören das Klicken auf .dropdown-toggle , sodass das Dropdown beim Hover angezeigt wird. Wenn Sie auf ein geöffnetes Dropdown , wird es ausgeblendet. Wenn Sie die Maus das Dropdown-Menü erneut angezeigt. Einige der js-Lösungen beeinträchtigen die iOS-Kompatibilität, andere Plugins funktionieren nicht in modernen Desktop-Browsern, die Touch-Ereignisse unterstützen.

Aus diesem Grund habe ich das Bootstrap Dropdown Hover- Plugin erstellt , das all diese Probleme verhindert, indem nur die Standard-Bootstrap-Javascript-API ohne Hack verwendet wird . Sogar die Aria-Attribute funktionieren mit diesem Plugin einwandfrei.

István Ujj-Mészáros
quelle
Was ist Ihre Meinung zu github.com/vadikom/smartmenus ? Ich kann mich nicht entscheiden, beide Bibliotheken scheinen wirklich gut zu sein.
Csaba Toth
2
Smartmenus sehen wirklich gut aus, es ist vielleicht besser für Menüs. Mein Plugin ist nur eine kleine Ergänzung zu den Bootstrap-Dropdowns. Es öffnet lediglich ein Dropdown beim Hover, während das Smartmenu auch Untermenüs unterstützt und einige andere ausgefallene Dinge erledigt.
István Ujj-Mészáros
1
Vielen Dank. Ich sehe, dass der Code von smartmenu sehr umfangreich ist und es auch viel CSS gibt. Bisher bin ich mitgegangen bootstrap-dropdown-hover, weil es den Job zu machen scheint und kompakter. Ich baue einen Landeplatz mit linker Navigationsleiste.
Csaba Toth
4

Verwenden Sie diesen Code, um das Untermenü im Mauszeiger zu öffnen (nur Desktop):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

Und wenn Sie möchten, dass das Menü der ersten Ebene auch auf Mobilgeräten anklickbar ist, fügen Sie Folgendes hinzu:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

Das Untermenü (Dropdown-Menü) wird mit dem Mauszeiger auf dem Desktop und mit Click / Touch auf dem Handy und Tablet geöffnet. Sobald das Untermenü geöffnet war, können Sie den Link mit einem zweiten Klick öffnen. Dank der if ($(window).width() > 767)wird das Untermenü auf dem Handy die volle Bildschirmbreite einnehmen.

Jibato
quelle
Ich würde gerne Ihren Code verwenden, aber ich habe Probleme, ihn richtig zum Laufen zu bringen. Erstens, wie kann man hover () für Handys entfernen und nur für den Desktop verwenden? Wenn ich Ihren Code verwende und die Fenstergröße auf Mobilgeräte ändere, erhalte ich sowohl die Funktionen hover () als auch click (). Aber noch seltsamer ... ist, dass dieses Verhalten aufhört, wenn ich den Browser aktualisiere, ha! Können Sie mir zeigen, wie ich das beheben kann? Ich benötige Desktop-Untermenüs, um sie auf hover () anzuzeigen, und klicke (), um Untermenüs auf Mobilgeräten anzuzeigen, ohne den Browser aktualisieren zu müssen, auch wenn die Größe des Fensters geändert wird, damit es ordnungsgemäß funktioniert. Ich hoffe das ist klar
Chris22
ok, das macht Sinn und ich werde versuchen, Ihre Lösung so auszuführen, wie Sie es empfehlen. Vielen Dank!
Chris22
Verwenden Sie diese beste Methode: @falter
Farhad Sakhaei
4
$('.dropdown').hover(function(e){$(this).addClass('open')})
Савостьянов Максим
quelle
1
Bitte geben Sie einige Details zu Ihrer Antwort an.
Arnold Daniels
3

Dadurch werden die oberen ausgeblendet

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}
Allochi
quelle
3

Dies sollte die Dropdowns und ihre Carets verbergen, wenn sie kleiner als eine Tablette sind.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
Kevin Nuut
quelle
Warum willst du es verstecken? Jetzt haben die mobilen Benutzer keine Möglichkeit mehr, auf die Links im Untermenü zuzugreifen. Es ist besser, den Hover-Effekt auf einem mobilen Gerät auszuschalten und das Dropdown-Menü beizubehalten. Auf diese Weise können sie es öffnen, indem sie darauf klicken.
Paul
3

Die jQuery-Lösung ist gut, muss jedoch entweder bei Klickereignissen (für Mobilgeräte oder Tablets) behandelt werden, da der Schwebeflug nicht ordnungsgemäß funktioniert.

Die Antwort von Andres Ilich scheint gut zu funktionieren, sollte aber in eine Medienabfrage eingeschlossen werden:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}
Fizex
quelle
3

Die sehr einfache Lösung für Version 2, nur CSS. Behält die gleiche freundliche Funktionalität für Handy und Tablet.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}
Kash
quelle
Dies funktioniert nicht gut für einige Themen, bei denen zwischen dem Menüpunkt und dem Dropdown eine Lücke besteht. Das Menü verschwindet, wenn sich die Maus in diese Lücke bewegt.
ndbroadbent
2

Überschreiben Sie bootstrap.js mit diesem Skript.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 
Hari Krishnan
quelle
2

Hier ist meine Technik, die eine leichte Verzögerung hinzufügt, bevor das Menü geschlossen wird, nachdem Sie aufgehört haben, über dem Menü oder der Umschalttaste zu schweben. Das <button>, auf das Sie normalerweise klicken würden, um das Navigationsmenü anzuzeigen, ist #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
Sarah Vessels
quelle
2

Um die Antwort von Sudharshan zu verbessern, füge ich dies in eine Medienabfrage ein, um das Schweben auf XS-Anzeigebreiten zu verhindern ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Auch das Caret im Markup ist nicht erforderlich, nur die Dropdown- Klasse für das Li .

Johna
quelle
2

Dies funktioniert für WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}
Fred K.
quelle
2

Sie haben also diesen Code:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Normalerweise funktioniert es bei einem Klickereignis, und Sie möchten, dass es bei einem Hover-Ereignis funktioniert. Dies ist sehr einfach. Verwenden Sie einfach diesen JavaScript / jQuery-Code:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Das funktioniert sehr gut und hier ist die Erklärung: Wir haben eine Schaltfläche und ein Menü. Wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü angezeigt, und wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü nach 100 ms ausgeblendet. Wenn Sie sich fragen, warum ich das verwende, brauchen Sie Zeit, um den Cursor von der Schaltfläche über das Menü zu ziehen. Wenn Sie im Menü sind, wird die Zeit zurückgesetzt und Sie können so oft dort bleiben, wie Sie möchten. Wenn Sie das Menü verlassen, wird das Menü sofort ohne Zeitüberschreitung ausgeblendet.

Ich habe diesen Code in vielen Projekten verwendet. Wenn Sie Probleme bei der Verwendung haben, können Sie mir gerne Fragen stellen.

Crisan Raluca Teodora
quelle