使用jQuery执行此操作的最轻量级方法是什么？

Question

我有一个带有悬停效果的简单菜单栏：

http://www.bridgecitymedical.com/

现在，我正在添加子菜单。我想（在一个标签上悬停），div向下滑动，其中包含相应div的所有子选项。我是wordpress，所以显示内容就像使用内置函数一样简单，但是下拉效果的最佳方法是什么？

这是我想要的图片：

我想我可以创建一个嵌套在每个标签中的div，然后使用jQuery来向外调整其尺寸，如下所示：

$('.menu').hover(
  function () {
    $(this).animate ... etc
  }, 
  function () {
    $(this).animate ... etc
  }
);

但是我最终会遇到很多愚蠢的div，不会很干净。有什么建议吗？

Answer 1

这种方式非常简单有效。

var speed = 130; // milliseconds
$('.menu li').hover(function(e) {
    $(this).find('div').slideDown(speed);
}, function(e) {
    $(this).find('div').slideUp(speed);
});

如果您希望它同时向下滑动和，那么您可以改为使用show()和hide()，它会自动为您执行此操作。< / p>

修改 对于弹出的div，请尝试添加margin-left等于徽标图像的宽度。

编辑2： 小心将div放在ul之外，因为现在当你试图将鼠标悬停在div上时会触发mouseleave（blur）事件并导致div向上滑动。

尝试这是一种解决方法（或者那种效果）：

var divEntered = false, open, close;
var closeFunction = function() {
    $('.sti-subitem').slideUp(150, function() {
        // set closed flag
    });
};
$('.sti-menu').hover(function() {
    $('.sti-subitem').slideDown(200);
}, function() {
    close = setTimeout(closeFunction, 600);
});

$('.sti-subitem').mouseenter(function() {
    clearTimeout(close);
});

$('.sti-subitem').mouseleave(function() {
    close = setTimeout(closeFunction, 600);
});