web-dev-qa-db-fra.com

Bootstrap Dropdown avec survol

OK, donc ce dont j'ai besoin est assez simple.

J'ai mis en place une barre de navigation avec des menus déroulants (en utilisant class="dropdown-toggle" data-toggle="dropdown"), et cela fonctionne bien.

La chose est que cela fonctionne "onClick", alors que je préférerais si cela fonctionnait "onHover".

Y a-t-il une manière intégrée de faire ceci?

javascriptjqueryhtmlcsstwitter-bootstrap
155
Dr.Kameleon

La solution la plus simple serait en CSS. Ajouter quelque chose comme ...

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

Travailler Fiddle

292
brbcoding

La meilleure façon de le faire est de simplement déclencher un événement de clic d'amorçage avec un survol. De cette façon, il devrait toujours rester tactile amical 

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

Vous pouvez utiliser la fonction de survol de jQuery.

Vous devez simplement ajouter la classe open lorsque la souris entre et supprimer la classe lorsque la souris quitte la liste déroulante.

Voici mon code:

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

Un moyen facile, en utilisant jQuery, est la suivante:

$(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

Pour CSS, ça devient fou quand vous cliquez aussi dessus. C'est le code que j'utilise, cela ne change rien non plus pour l'affichage mobile.

$('.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

Dans Twitter Bootstrap n'est pas implémenté mais vous pouvez utiliser le ce plugin

Mise à jour 1: 

Sames question ici

6
Emad Mokhtar

Survolez les éléments de navigation pour voir qu'ils s'activent en survol . http://cameronspear.com/demos/Twitter-bootstrap-hover-dropdown/#

6
esm

Donc vous avez ce 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>

Normalement, cela fonctionne sur les événements click et vous voulez que cela fonctionne sur les événements survolés. C'est très simple, utilisez ce code javascript/jquery:

$(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();
        })
    })
})

Cela fonctionne très bien et voici l'explication: nous avons un bouton et un menu. Lorsque nous survolons le bouton, nous affichons le menu et lorsque nous laissons le bouton de la souris enfoncé, nous masquons le menu après 100 ms. Si vous vous demandez pourquoi je l’utilise, c’est parce que vous avez besoin de temps pour faire glisser le curseur du bouton sur le menu. Lorsque vous êtes au menu, l'heure est réinitialisée et vous pouvez y rester autant de fois que vous le souhaitez. Lorsque vous quittez le menu, nous le masquons instantanément sans délai d'expiration.

J'ai utilisé ce code dans de nombreux projets. Si vous rencontrez un problème, n'hésitez pas à me poser des questions.

4
Crisan Raluca Teodora

Essayez ceci en utilisant la fonction de survol avec les animations en fondu

$('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

C’est ce que j’utilise pour le faire descendre en vol stationnaire avec du jQuery

$(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

Mis à jour avec un plugin approprié

J'ai publié un plugin approprié pour la fonctionnalité de survol déroulant, dans lequel vous pouvez même définir ce qui se passe lorsque vous cliquez sur l'élément dropdown-toggle:

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

Pourquoi je l'ai fait, alors qu'il y a déjà beaucoup de solutions?

J'ai eu des problèmes avec toutes les solutions existantes. Les CSS simples n'utilisent pas la classe .open sur le .dropdown, il n'y aura donc pas de retour d'informations sur l'élément bascule déroulant lorsque le menu déroulant est visible.

Les js interférant avec cliquer sur .dropdown-toggle, le menu déroulant apparaît alors en survol, puis le masque lorsque vous cliquez sur un menu déroulant ouvert. Le déplacement de la souris déclenchera la réapparition du menu déroulant. Certaines des solutions js freinent la compatibilité iOS, certains plugins ne fonctionnent pas sur les navigateurs de bureau modernes prenant en charge les événements tactiles.

C'est pourquoi j'ai créé le plugin Bootstrap Dropdown Hover qui évite tous ces problèmes en utilisant uniquement l'API javascript Bootstrap standard, sans aucun piratage.

2
István Ujj-Mészáros

J'essaie d'autres solutions, j'utilise Bootstrap 3, mais le menu déroulant se ferme trop rapidement pour passer dessus.

supposé que vous ajoutez class = "dropdown" à li, j'ai ajouté un délai d'attente

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

Cela vous aidera à créer votre propre classe de survol pour bootstrap:

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;
}

Les marges sont définies pour éviter les fermetures indésirables et elles sont facultatives.

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>

N'oubliez pas de supprimer l'attribut button data-toggle = "dropdown" si vous souhaitez supprimer onclick open, et cela fonctionnera également lorsque l'entrée sera ajoutée avec la liste déroulante.

2
Sabri Aziri

Ceci ne survole que la barre de navigation lorsque vous n'êtes pas sur un appareil mobile, car je trouve que survoler la navigation ne fonctionne pas bien sur les divices mobiles:

    $( 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

Déclencher un événement click avec une hover a une petite erreur. Si mouse-in et ensuite une click crée un effet inversé. opens quand mouse-out et close quand mouse-in. Une meilleure solution:

$('.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

La solution que je propose détecte si son appareil n'est pas tactile et que le navbar-toggle (menu hamburger) n’est pas visible et fait en sorte que l’élément de menu parent le sous-menu de révélation en survol et et suive son lien en cliquant . 

Fait également le top 0 de la marge, car l’écart entre la barre de navigation et le menu de certains navigateurs ne vous permettra pas de survoler les sous-éléments

$(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