Question

我尝试使用展开效果在悬停时设置引导菜单下拉列表。

现在我有了这个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？

谢谢！

Answer 1

是的，你在桌面上是正确的，因为桌面版支持悬停事件，但移动版不支持。应使用点击事件处理移动版本。

Answer 2

我能够做到这样的效果：

// 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取决于您在下拉列表中有多少个按钮，您拥有的按钮越多，高度越高。

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

2 个答案: