wake-up-neo.com

Bootstrap Dropdown mit Hover

OK, also was ich brauche, ist ziemlich einfach.

Ich habe eine Navbar mit einigen Dropdown-Menüs eingerichtet (mit class="dropdown-toggle" data-toggle="dropdown"), und es funktioniert gut.

Die Sache ist, es funktioniert "onClick", während ich es vorziehen würde, wenn es "onHover" funktionieren würde.

Gibt es eine integrierte Möglichkeit, dies zu tun?

javascriptjqueryhtmlcsstwitter-bootstrap
155
Dr.Kameleon

Die einfachste Lösung wäre in CSS. Etwas hinzufügen wie ...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Arbeiten Fiddle

292
brbcoding

Am besten lassen Sie das Bootstraps-Click-Ereignis mit einem Hover auslösen. Auf diese Weise sollte es berührungslos bleiben 

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
63
Mark Williams

Sie können die Hover-Funktion von jQuery verwenden.

Sie müssen nur die Klasse open hinzufügen, wenn die Maus in die Klasse eintritt, und die Klasse entfernen, wenn die Maus das Dropdown-Menü verlässt.

Hier ist mein Code:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});
52
adhi

Mit jQuery ist dies ein einfacher Weg:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});
23
Biagio Chirico

Für CSS wird es verrückt, wenn Sie auch darauf klicken. Dies ist der Code, den ich verwende, er ändert auch nichts für die mobile Ansicht.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});
9
user1079877

In Twitter Bootstrap ist nicht implementiert aber Sie können das dieses Plugin verwenden

Update 1: 

Sames Frage hier

6
Emad Mokhtar

Bewegen Sie den Mauszeiger über die Navigationselemente, um zu sehen, dass sie beim Bewegen aktiviert werden. http://cameronspear.com/demos/Twitter-bootstrap-hover-dropdown/#

6
esm

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 für ein Klickereignis und für das Hover-Ereignis. 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 einen Button und ein Menü. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird das Menü angezeigt, und wenn Sie die Maus außerhalb der Schaltfläche bewegen, wird das Menü nach 100 ms ausgeblendet. Wenn Sie sich fragen, warum ich das benutze, liegt es daran, dass Sie Zeit benötigen, um den Cursor von der Schaltfläche über das Menü zu ziehen. Wenn Sie sich im Menü befinden, wird die Uhrzeit 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.

4
Crisan Raluca Teodora

Versuchen Sie dies mit der Hover-Funktion mit Fadein-Animationen

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
3
Rakesh Vadnal

Dies ist, was ich verwende, um es mit einigen jQuery auf Hover-Dropdown zu machen

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});
3
Amir5000

Mit einem richtigen Plugin aktualisiert

Ich habe ein passendes Plugin für die Dropdown-Hover-Funktion veröffentlicht, in dem Sie sogar definieren können, was passiert, wenn Sie auf das dropdown-toggle-Element klicken:

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

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

Ich hatte Probleme mit allen bisher bestehenden Lösungen. Die einfachen CSS verwenden die Klasse .open nicht für .dropdown. Daher wird keine Rückmeldung zum Dropdown-Element angezeigt, wenn die Dropdown-Liste sichtbar ist.

Die js stören das Klicken auf .dropdown-toggle, so dass das Dropdown-Menü im Hover-Modus erscheint und beim Klicken auf ein geöffnetes Dropdown-Menü ausgeblendet wird. Wenn Sie die Maus herausziehen, wird das Dropdown-Menü erneut geöffnet. Einige der js-Lösungen bremsen iOS-Kompatibilität, einige Plugins funktionieren nicht mit modernen Desktop-Browsern, die Touch-Events unterstützen.

Aus diesem Grund habe ich das Bootstrap Dropdown Hover Plugin erstellt, das alle diese Probleme verhindert, indem nur die standardmäßige Bootstrap-JavaScript-API verwendet wird, ohne dass ein Hack erforderlich ist.

2
István Ujj-Mészáros

Ich probiere andere Lösungen aus, ich benutze Bootstrap 3, aber das Dropdown-Menü wird zu schnell geschlossen, um darüber zu gelangen

angenommen, dass Sie class = "dropdown" zu li hinzufügen, fügte ich ein Timeout hinzu

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});
2
al404IT

Dadurch können Sie Ihre eigene Hover-Klasse für Bootstrap erstellen:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

Ränder werden so eingestellt, dass ein unerwünschtes Schließen vermieden wird, und sie sind optional.

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Vergessen Sie nicht, das Tastenattribut data-toggle = "dropdown" zu entfernen, wenn Sie onclick open entfernen möchten. Dies funktioniert auch, wenn die Eingabe mit dropdown angehängt wird.

2
Sabri Aziri

Die Navbar wird nur dann angezeigt, wenn Sie sich nicht auf einem mobilen Gerät befinden, da ich finde, dass das Schweben der Navigation auf mobilen Divices nicht gut funktioniert:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    });

});
2
solarbaypilot
    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });
1
Waqar Ahmed

Das Auslösen eines click-Ereignisses mit einer hover hat einen kleinen Fehler. Wenn mouse-in und dann eine click den umgekehrten Effekt erzeugt. Es opens wenn mouse-out und close wenn mouse-in. Eine bessere Lösung:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});
1
umesh kadam

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div>

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen

0
antelove

Die Lösung, die ich vorschlage, stellt fest, ob das Gerät nicht berührungslos ist und der navbar-toggle (Hamburgermenü) nicht sichtbar ist, und lässt den übergeordneten Menüpunkt aufschlussreiches Untermenü bei hover und und seinem Link bei click folgen. 

Macht auch den Rand 0, da die Lücke zwischen der Navigationsleiste und dem Menü in einigen Browsern nicht zu den Unterelementen führt

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

0
GiorgosK

Dropdown-Liste "Bootstrap" Bearbeiten Sie den Hover und bleiben Sie beim Klicken in der Nähe, indem Sie property display: block hinzufügen. in css und Entfernen dieser Attribute data-toggle = "dropdown" role = "button" vom button-Tag

.dropdown:hover .dropdown-menu {
  display: block;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

0
Super Model