JQuery悬停 - 带有隐藏悬停的标签并显示下拉菜单（选择输入）的导航菜单

问题描述：

我有一个导航栏用于过滤搜索结果。我试图保持事物的清洁和合理大小，所以我有一个JQuery .hover函数，它基本上隐藏了悬停时过滤器选项的标签，并用下拉菜单替换它以从中进行选择。JQuery悬停 - 带有隐藏悬停的标签并显示下拉菜单（选择输入）的导航菜单

我唯一的问题是，一旦你把鼠标悬停在标签上，然后放下菜单，如果你移动鼠标来选择一个选项，而不是在li的边界内显示，它会认为你是悬停的，然后隐藏选择并显示标签。

任何想法让悬停功能不认为你关闭时，选择菜单被删除，你正试图选择一个选项？

$('li').hover(
    function(){ 
     $(this).children('.nav_label').hide(); 
     $(this).children('.nav_select').show(); 
    }, 
    function(){ 
     $(this).children('.nav_label').show(); 
     $(this).children('.nav_select').hide(); 
    } 
); 

<li><p> 
    <div class="nav_label">Menu Options</div> 
    <div class="nav_select" style="display:none;"> 
    <select > 
     <option value="" selected="selected">Choose an Option</option> 
     <option value="option1">option1</option> 
     <option value="option2">option2</option> 
     <option value="option3">option3</option> 
    </select> 
    </div> 
</p></li>

从我测试这个作品在Chrome中，而不是在IE或者FF - http://jsfiddle.net/mrtsherman/kpwJ9/ – mrtsherman

这是你的表演，但我真的发现了这个怪异的接口使用。我不喜欢它作为最终用户。也许只是说目前的实施还没有完成。 – mrtsherman

答

所以我不认为有一个很好的方法来做到这一点。似乎发生的事情是，在IE和FF中，悬停事件被触发，因为选择下拉列表存在于li容器之外。

所以你必须做的是检查下拉列表是否有焦点。如果是这样，那么不要重新隐藏选择列表。

http://jsfiddle.net/mrtsherman/kpwJ9/3/

的：聚焦选择是jQuery的1.6+。如果您使用的是较旧的jQuery，我将包含一个日志语句以显示活动元素。我相信你可以在此编码你自己的解决方案。我稍微改变了你的html，但你应该能够使用你现有的html结构和一些额外的jQuery来实现这一点。但我认为它与答案无关。

$('li').hover(

function() { 
    $(this).children('.nav_label').hide(); 
    $(this).children('.nav_select').show(); 
}, function() { 
    console.log(document.activeElement.id); 
    if (!$('#myList').is(':focus')) { 
     $(this).children('.nav_label').show(); 
     $(this).children('.nav_select').hide(); 
    } 
});

JQuery悬停 - 带有隐藏悬停的标签并显示下拉菜单（选择输入）的导航菜单

相关推荐