Comment faire la liste déroulante de Bootstrap sur hover?

1.Masquer menu déroulant sur mouseover .

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

2.Masquer menu déroulant sur Cliquez sur .

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    });
});

Http://jsfiddle.net/7yMsQ/1/

Voici une fonction que j'utilise pour faire glisser les listes déroulantes de la barre de navigation sur le survol au lieu de simplement apparaître dans

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

Vous pouvez simplement le faire en utilisant uniquement css. En cas de bouton de liste déroulante.

   <div class="btn-group btn-hover-group">
      <a href="#" id="selected" class="btn btn-default editor-submit">Action 1</a>
      <a href="#" class="btn btn-default dropdown-toggle"></a>
      <ul class="dropdown-menu pull-right">
        <li><a href="#" id="all" class="editor-submit">Action 2</a></li>
        <li><a href="#" id="matching" class="editor-submit">Action 3</a></li>
      </ul>
    </div>

Supprimé data-toggle="dropdown" à partir de <a href="#" class="btn btn-default dropdown-toggle"></a>

.btn-hover-group > a:hover ~ ul{
 display:block;
}
.btn-hover-group > .dropdown-menu:hover{
 display:block;
}

J'espère que cela suffira votre but.

Vous pouvez utiliser un bootstrap 4 comme ceci..

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Définissez ensuite la valeur de la propriété de classe following..it devrait fonctionner

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-content {display: block;}