Javascript 具有展开效果的下拉式引导菜单

我试图使引导菜单下拉悬停与展开效果

现在我有了一个javascript，可以让它在悬停时下拉，并带有幻灯片效果：

// dropdown hover effect
$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp()
});

这在桌面版上运行良好，但在移动版上不起作用，并且没有展开效果

实现这一目标的最佳方式是什么？通过javascript还是css

---

谢谢

是的，您在桌面上是对的。代码运行良好，桌面版本支持悬停事件，但移动版本不支持。移动版本应该使用单击事件处理。

我可以这样做：

// dropdown hover effect
if($(window).width() > 768) {
  $('.navbar .dropdown').hover(function() {
    $(this).addClass('open');
  }, function() {
    $(this).removeClass('open');
  });
};

和css：

@media (min-width: 768px) {
  .dropdown .dropdown-menu {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;

      max-height: 0;
      display: block;
      overflow: hidden;
      opacity: 0;
      -webkit-transform: perspective(200px) rotateX(-90deg); 
        -moz-transform: perspective(200px) rotateX(-90deg); 
        transform: perspective(200px) rotateX(-90deg);
    }

    .dropdown.open .dropdown-menu {
      max-height: 250px;
      opacity: 1;
      -webkit-transform: perspective(200px) rotateX(0deg); 
        -moz-transform: perspective(200px) rotateX(0deg); 
        transform: perspective(200px) rotateX(0deg);
        transform-origin: center top;
    }
}

---

max height

取决于下拉列表中的按钮数量，按钮越多，高度越高

查看移动友好CSS解决方案。请记住，您不能在触摸屏移动设备上使用悬停事件