点击引导菜单下拉动画

我有下拉动画的问题。我发现了一个很好的工作代码，但它在悬停事件上起作用。现在，我需要一些帮助来调整“点击”事件中的代码。这是我的代码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");     
     }); 
});

来源

2017-04-18 DraganK

下拉你不想上的动画徘徊？ –

我想要某些屏幕尺寸，但是当我调整它的尺寸时，它不是一个明智的选择。 – DraganK

只需检测移动设备并解除悬停并将其与点击进行绑定即可。 –

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

来源

2017-04-18 07:14:27

是的，这工作得很好=），谢谢！ – DraganK

点击引导菜单下拉动画

回答

相关问题