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

マウスオーバーで問題なく動作しますが、クリック後に開く必要があります。ドロップダウンがクリックされたときに.hoverを.clickに置き換えると、ドロップダウンが開いてすぐに閉じます。

ブートストラップを使用して従来の方法で、クリックすると開き、マウスアウトまたは他の場所をクリックすると閉じることは可能ですか? どんな助けでも。ありがとう。

4

6 に答える 6

9

BootStrap 3 では、ドロップダウン イベントを使用できます。

       // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // ADD SLIDEUP ANIMATION TO DROPDOWN //
        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
        });
于 2014-04-16T08:07:03.660 に答える
9

CSS3 トランジションを使用できます。

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}

.open .dropdown-menu {
    opacity: 1;
}

http://caniuse.com/css-transitionsでブラウザのサポートを確認してください

于 2014-04-03T04:38:17.833 に答える
5

CSSトランジションの使用に関するYokomizorの答えは良いアイデアですが、以下の彼のコードでは:

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
}

彼が最終的にやっていることは、ドロップダウンを非表示にするだけですが、実際にはドロップダウンにあるものはまだそこにあり、あなたがそれを見ることができないということです. より良い方法は次のとおりです。

.dropdown-menu {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    transform: rotateX(90deg);
    transform-origin: top;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
}

この場合、素敵な (一種の) スライド ダウンとアップ アニメーションも作成されます。

デモ

于 2016-03-15T06:50:53.183 に答える
2

これを試して、これが探しているものかどうかを確認してください。クリックしてドロップダウンを開き、マウスアウトして非表示にします。http://jsbin.com/ibovag/1/

$('.dropdown-menu').on('mouseover', function(){
  $(this).on('mouseleave',hideDropdown);
});
function hideDropdown(e)
{
  $(this).closest('.open').removeClass('open');
  $(this).off('mouseleave');
 }
于 2013-04-27T00:33:01.957 に答える
0

JQueryからslideToggleが使える！

http://api.jquery.com/slideToggle/

このような：

$('.navbar .dropdown').click(function() {
  $('.dropdown-menu', this).slideToggle(250);
});
于 2013-04-27T00:47:37.590 に答える