Question

我有一个下拉菜单，其中包含数量的表单选择选项。下拉使用Jquery悬停。因此，在菜单图标悬停时，会出现下拉菜单，当您超过它时，它会隐藏。每当我尝试更改选择选项时，它会显示剩余的数量。但是，当我将鼠标悬停在其他选项上或关闭第一个选项时，整个下拉菜单会隐藏。

$("#navigation #seven").live({
    mouseenter:function(){
        $(this).find('ul').show();
    },
    mouseleave:function() {
        $(this).find('ul').hide();
    }
});

Answer 1

发生这种情况是因为当您尝试进入选择时，您正在使用menuitem。

您必须环绕菜单项并按容器选择并将鼠标悬停在div上

<div id="hoverable">
   <menuitem />
   <select style="display:none"><option></option></select>
</div>

然后，将悬停应用于div

$('#hoverable').hover(function(){
   $(this).find('select').show();
}, function(){
   $(this).find('select').hide();
});

Answer 2

我建议在悬停时设置超时，让我们说几百毫秒。在菜单中，将鼠标悬停在其上时设置为true，在悬停时设置为false。因此，如果您的菜单图标悬停在该标志上，则它不会隐藏下拉菜单。

示例：

var overMenu = false;
$(menuItem).hover(
    function() {
        $(dropDownMenu).show();
    },
    function() {
        setTimeout(function() {
            if ( !overMenu )
                $(dropDownMenu).hide();
        }, 200);
    }
);
$(dropDownMenu).hover(
    function() { overMenu = true; },
    function() {
        overMenu = false;
        $(this).hide();
    }
};

Answer 3

知道了！

var hover_off = false;
var hover_count = 1000;

$("#navigation #seven").live("mouseover",function(){
    hover_off = false;
    $(this).find('ul').show();
});

$("#navigation #seven").live("mouseout",function(){
    hover_off = true;
    setTimeout(myMouseOut, hover_count);
});

function myMouseOut() {
    if (hover_off) {
        $("#navigation #seven").find('ul').hide();
    }
}

表格中的Jquery问题选择下拉隐藏

3 个答案: