Javascript 当selectbox处于活动状态时，如何防止jquery动画触发

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

我可以通过如下操作删除mouseleave事件：

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

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

以下是我的尝试：

代码尝试确定某个选择框何时处于活动状态，并在任何选择框处于活动状态时，在mouseleave上抑制容器的

slideUp

我只在Firefox中测试过这一点，我怀疑这可能过于简单，可能无法涵盖所有用例（例如，当用户从下拉列表中选择一个已经选择的项时，它将不会触发

更改

事件）。可能需要进一步测试/调整

---

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

一个可能的解决方法是使用现有的众多jquery插件中的一个，用

替换

。这使您可以更灵活地设置下拉菜单的样式，更重要的是，允许您调整css，以便在下拉菜单展开时自动缩放包含的div

只是想一想。

以下是我的尝试：

代码尝试确定某个选择框何时处于活动状态，并在任何选择框处于活动状态时，在mouseleave上抑制容器的

slideUp

我只在Firefox中测试过这一点，我怀疑这可能过于简单，可能无法涵盖所有用例（例如，当用户从下拉列表中选择一个已经选择的项时，它将不会触发

更改

事件）。可能需要进一步测试/调整

---

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

一个可能的解决方法是使用现有的众多jquery插件中的一个，用

替换

。这使您可以更灵活地设置下拉菜单的样式，更重要的是，允许您调整css，以便在下拉菜单展开时自动缩放包含的div

只是一个想法

$('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");
});