Question

以下jsfiddle演示了这个问题。在Firefox中，将鼠标悬停在“突出显示故事”上并尝试从第二个下拉列表中进行选择：包含ul动画已关闭，无法选择选项。通过从顶部选择框中选择并稍微向下移动鼠标，也可以进入闪烁循环。

我可以通过这样的方式删除mouseleave事件：

$('.selector').click(function(){
      $('nav ul li').unbind('mouseleave');
});

但这显然可以防止悬停动画正确触发。任何人都可以提出更优雅的解决方案吗？

http://jsfiddle.net/codecowboy/mDUa9/8/

Answer 1

这是我的尝试：http://jsfiddle.net/rPe9r/

$('nav ul li').hover(function() { // mouse enter
    $('ul', this).slideDown(100);
    }, function() { // mouseout
        var container = $("ul", this);
        // Hide popup if dropdown menu is not active
        if (!container.hasClass("dropdown-active")) {
            container.slideUp(100);
        }
    });

$("nav select").bind("focus", function() {
    $(this).closest("ul").addClass("dropdown-active");
}).bind("change focusout", function() {
    $(this).closest("ul").removeClass("dropdown-active");
});

代码尝试确定选择框何时处于活动状态，并在任何选择框处于活动状态时在mouseleave上压缩容器的slideUp。

我只是在Firefox中对此进行了测试，我怀疑这可能过于简单，可能无法涵盖所有用例（例如，当用户从下拉列表中选择已选择的项目时，不会触发{{1} }事件）。可能需要进一步测试/调整。

当下拉框展开时，也许更健壮的方法是动态缩放容器的高度，以便当用户导航下拉菜单时鼠标不会离开容器。当然，这里的难点在于以便携方式确定选择下拉菜单的大小。

可能的解决方法是使用其中一个可用的jquery插件替换change <select>。这使您可以更灵活地设置下拉菜单的样式，更重要的是，允许您调整css，以便在下拉菜单展开时自动缩放包含div。

只是一个想法。

当选择框处于活动状态时，如何防止jquery动画触发

1 个答案: