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

How can I prevent a jquery animation from firing when a selectbox is active

本文关键字：活动状态 jquery 何防止 动画 选择      更新时间：2023-09-26

下面的示例演示了这个问题。在Firefox中，将鼠标悬停在"高亮故事"上，并尝试从第二个下拉菜单中选择:包含的ul动画关闭，无法选择选项。也可以通过从顶部选择框中选择并稍微向下移动鼠标来进入闪烁循环。

我可以像这样删除mouseleave事件:

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

但这显然会阻止悬停动画的正确触发。有人能提出一个更优雅的解决方案吗?

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

这是我的尝试: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中测试过，我怀疑这可能过于简单，可能无法涵盖所有用例(例如，当用户从下拉菜单中选择一个已经选中的项目时，不会触发change事件)。可能需要进一步的测试/调整。

也许更健壮的方法是在下拉框展开时动态缩放容器的高度，这样当用户浏览下拉菜单时鼠标就不会离开容器。当然，这里的困难在于以可移植的方式确定选择下拉菜单的大小。

一个可能的解决方案是使用许多可用的jquery插件之一，用<div>代替<select>。这让你在设计下拉菜单的样式时更加灵活，更重要的是，允许你调整你的css，这样当下拉菜单展开时，包含的div会自动缩放。

只是一个想法。

相关文章：