jquery - 当下拉选项聚焦时调用 Slidetoggle

Question

http://jsfiddle.net/EhTJF/

链接是我遇到的问题的一个例子。当一个元素悬停在上面时，会调用 slidetoggle() 来显示一个下拉列表。当试图在 ddl 中选择一个选项时，会再次调用 slidetoggle() 并强制 ddl 和切换的元素折叠。

关于我做错了什么的任何想法？

*编辑

缩进的功能是允许用户从下拉列表中选择一个选项，然后允许元素自动向上切换。

Answer 1

hover() 方法有 2 个签名。第一个参数有 2 个参数：一个用于在鼠标进入元素时调用的函数，第二个用于在退出时调用的函数。第二个签名只接受一个为进入和退出事件调用的函数。在您当前的示例中，您对悬停输入和悬停退出使用相同的功能；这就是为什么您的下拉元素被隐藏的原因。

http://api.jquery.com/hover/

如果您希望下拉菜单在第一次悬停后保持打开状态，我有这个示例：

http://jsfiddle.net/gwZbj/4/

Answer 2

这有点复杂，但可能是这样的：

$(document).ready(function () {
    var timer;
    $('.dropdown').on({
        mouseenter: function () {
            var elm = $(this).find('.sub_navigation');
            if (!elm.is(':visible')) {
                elm.slideDown(100);
            }else{
                clearTimeout(timer);
            }
        },
        mouseleave: function() {
            var elm = $(this).find('.sub_navigation');
            timer = setTimeout(function() {
                elm.slideUp(100);
            }, 300);
        }
    });
});​

小提琴