210

わかりましたので、必要なものはかなり簡単です。

いくつかのドロップダウン メニューを含むナビゲーション バーを ( を使用して) セットアップしましたが、正常class="dropdown-toggle" data-toggle="dropdown"に動作します。

問題はそれが機能するということですonClick" onHover"。

これを行う組み込みの方法はありますか？

4

22 に答える 22

403

最も簡単な解決策は CSS です。のようなものを追加します...

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

働くフィドル

于 2013-04-25T12:14:50.510 に答える
9

CSSの場合、それをクリックすると気が狂います。これは私が使用しているコードです。モバイル ビューでも何も変更しません。

$('.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');
        }
    }
});
于 2014-11-20T06:57:21.930 に答える
6

したがって、次のコードがあります。

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

通常はクリックイベントで動作し、ホバーイベントで動作させたい. これは非常に簡単です。次の 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();
        })
    })
})

これは非常にうまく機能します。ここに説明があります。ボタンとメニューがあります。ボタンをホバーするとメニューが表示され、ボタンからマウスアウトすると 100ms 後にメニューが非表示になります。なぜ私がそれを使用するのか疑問に思っているのは、カーソルをボタンからメニューにドラッグするのに時間がかかるからです。メニューにいると時間がリセットされ、何度でもそこにとどまることができます。メニューを終了すると、タイムアウトなしですぐにメニューが非表示になります。

私はこのコードを多くのプロジェクトで使用してきました。使用中に問題が発生した場合は、遠慮なく質問してください。

于 2014-03-12T13:25:23.397 に答える
6

ナビゲーション項目にカーソルを合わせて、ホバー時にアクティブになることを確認します。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

于 2013-09-09T15:28:53.463 に答える
4

これは、いくつかの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');
    });
});
于 2014-04-08T18:11:08.823 に答える
3

適切なプラグインで更新

dropdown-toggleドロップダウン ホバー機能用の適切なプラグインを公開しました。このプラグインでは、要素をクリックしたときに何が起こるかを定義することもできます。

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

すでに多くの解決策があるのに、なぜ私はそれを作ったのですか?

以前に存在したすべてのソリューションに問題がありました。単純な CSS は の.openクラスを使用していない.dropdownため、ドロップダウンが表示されている場合、ドロップダウン トグル要素にフィードバックはありません。

js のものは をクリックすると干渉する.dropdown-toggleため、ホバー時にドロップダウンが表示され、開いているドロップダウンをクリックすると非表示になり、マウスを離すとドロップダウンが再び表示されます。一部の js ソリューションは iOS との互換性を損ない、一部のプラグインはタッチ イベントをサポートしている最新のデスクトップ ブラウザーで動作しません。

そのため、ハックなしで、標準の Bootstrap JavaScript API のみを使用してこれらの問題をすべて防止するBootstrap Dropdown Hoverプラグインを作成しました。

于 2015-02-01T02:39:55.737 に答える
2

これは、モバイルデバイスを使用していない場合にのみナビゲーションバーをホバーします。モバイルデバイスではナビゲーションをホバーするとうまく機能しないことがわかったからです。

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

});
于 2014-05-26T19:23:39.867 に答える
2

これは、ブートストラップ用の独自のホバー クラスを作成するのに役立ちます。

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

マージンは不要なクローズを避けるために設定され、オプションです。

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>

onclick open を削除する場合は、ボタン属性data-toggle="dropdown"を削除することを忘れないでください。これは、入力がドロップダウンに追加されている場合にも機能します。

于 2014-03-12T22:32:34.500 に答える
2

clickでイベントをトリガーするとhover、小さなエラーが発生します。If mouse-inand then はclickその逆の効果を生み出します。それopensはいつmouse-out、closeいつmouse-in。より良い解決策:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});
于 2015-10-15T15:27:48.537 に答える
1 
    $('.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)
    });
于 2015-03-10T17:41:49.583 に答える
0

この機能は、Jquery を使用して実装します。

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});
于 2021-12-17T13:46:06.087 に答える