单击时动画引导下拉菜单

Question

$('.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用.点击时下拉被点击它打开和关闭真正的快.

是否可以通过引导程序以传统方式执行,单击时打开以及在鼠标移动时单击或在其他位置单击时关闭？任何帮助.谢谢.

Answer 1

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

Answer 2

您可以使用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上的浏览器支持

Answer 3

Yokomizor对使用 CSS 转换的回答是一个不错的主意，但在他的代码中：

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

在这种情况下，它还创建了一个很好的（某种）上下滑动动画。

演示