Question

我使用的导航看起来像这样：

<div id="navigation">
<ul>
    <li>One
        <ul>
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul>
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
<div id="subnavigation">
</div>

由CMS生成。子条目和列表的#subnavigation不会显示：

#navigation>ul>li>ul>li {
display: none;
}
#subnavigation {
    display: none;
}

当鼠标翻过“One”，“Two”，“Three”时......我将子条目复制到子导航div中。它应该留在那里，只要鼠标在导航或子导航上，就应该显示它。

这是以下javascript代码应该做的事情。它显示并隐藏了子导航：

// display and hide subnavigation bar
$(function(){
    $('#navigation,#subnavigation>ul>li').hover(function(e){
        $('#subnavigation').show();
    },function(e){
        $('#subnavigation').hide();
    });
});

当鼠标在导航中悬停例如“2”时，则显示带有“Two1”，“Two2”......的子导航。当鼠标悬停例如“Two2”时出现问题：然后子导航消失。但是，当鼠标悬停在未被列表元素占据的子导航部分时，它不会消失。

当$（'＃navigation，＃subnavigation＆gt; ul＆gt; li'）。悬停发生时#subnavigation＆gt; ul＆gt; li不存在。有可能因为这个jquery在鼠标离开#navigation而不是＃subnavigation＆gt; ul＆gt; li时没有“注意到”？如果是，那么该问题的常见解决方案是什么？

感谢您的帮助！

Answer 1

试试这个： DEMO

HTML代码：

<div id="navigation">
<ul>
    <li>One
        <ul class="subnavigation">
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul class="subnavigation">
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul class="subnavigation">
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
</div>

CSS代码：

#navigation>ul>li {
    float:left;
    list-style:none;
    padding:5px;
}
ul.subnavigation {
  display: none;
}

Jquery代码：

$(function(){
    $('#navigation ul li').hover(function(e){
        $(this).find('.subnavigation').show();
    },function(e){
        //alert($(e.target).parent("ul").hasClass('.subnavigation'))
        if(!$(e.target).parent("ul").hasClass('subnavigation')){
            $('.subnavigation').hide();
        }
    });
});

DEMO

hover（）可以对mouseenter上不存在的元素做出反应吗？

1 个答案: