css - Bootstrap 菜单下拉动画点击

Question

我对下拉动画有疑问。我找到了一个很棒的工作代码，但它适用于悬停事件。现在我需要一些帮助来调整适用于“点击”事件的代码。这是我的代码 https://jsfiddle.net/pLrLLgoj/206/。

代码:

$(function(){
$(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        });
});

Answer 1

检查 I modified your fiddle

我已经删除了 JS，只更改了 CSS 以在点击时为下拉菜单设置动画

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