1

我有一个用于过滤搜索结果的导航栏。我试图保持干净和合理的大小，所以我有一个 JQuery .hover 函数，它基本上隐藏了悬停时过滤器选项的标签，并用下拉菜单替换它以供选择。

我唯一的问题是，一旦您将鼠标悬停在标签上，然后将菜单下拉，如果您移动鼠标选择未显示在 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>
4

1 回答 1

0

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

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

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

:focus 选择器是 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();
    }
});
于 2011-10-07T19:53:31.147 回答