表单选择下拉隐藏的Jquery问题
表单选择下拉隐藏的Jquery问题
提问于 2012-02-16 09:01:39
我有一个下拉菜单与数量的形式选择选项。该下拉菜单与Jquery hover一起工作。因此，将鼠标悬停在菜单图标上时，下拉菜单会出现，当您将其悬停在其上方时，它会隐藏起来。每次我尝试更改select选项时，它都会显示剩余的数量。但是，当我将鼠标悬停在不同的选项上或离开第一个选择选项时，整个下拉菜单都会隐藏。
$("#navigation #seven").live({
mouseenter:function(){
$(this).find('ul').show();
},
mouseleave:function() {
$(this).find('ul').hide();
}
});回答 3
Stack Overflow用户
发布于 2012-02-16 09:11:26
发生这种情况是因为当您尝试访问select时，鼠标移出了菜单项。
必须将菜单项和select by容器括起来，并在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();
});Stack Overflow用户
发布于 2012-02-16 09:09:57
我建议在鼠标悬停时设置一个超时时间，比如说几百毫秒。在菜单中，当您将鼠标悬停在其上时，将其设置为true，当您将鼠标悬停在其上时，将其设置为false。因此，如果您的菜单图标悬停时看到该标志为true，则不会隐藏下拉菜单。
示例：
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();
}
};Stack Overflow用户
发布于 2012-02-18 01:57:16
明白了!
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();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9304062
复制相关文章
相似问题
腾讯云开发者
