drop-down-menu - ホバー時にBootstrapのドロップダウンを作成するには?

Question

Twitterブートストラップのメニュードロップダウンをクリックではなくホバーにするにはどうすればよいですか?

Answer 1

1.マウスオーバーでドロップダウンメニューを非表示にします。

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

2.クリック時にドロップダウンメニューを非表示にします。

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

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

Answer 2

ナビゲーションバーのドロップダウンをポップアップするのではなく、ホバー時にスライドさせるために使用している関数を次に示します

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

Answer 3

クリックではなくホバーで Twitter ブートストラップ メニューのドロップダウンを作成する方法は多くの支持を得ていますが、Bootstrap の新しいバージョンではハッキングする必要はありません。

http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/は、既存の dropdown.js の代替であり、ホバー時に有効にできます。CSS の変更は必要ありません。

Answer 4

このようなブートストラップ 4 を使用できます。

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

次に、次のクラスプロパティ値を定義します..動作するはずです

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