Question

编辑：在此处查看此操作：http://jsbin.com/emobi/5 - 这是使用mouseenter / mouseleave。

我有一个使用嵌套UL的基本菜单，我认为这是非常标准的。当从“根”菜单悬停在LI上时，我希望显示该LI内的UL。将鼠标移开或移到另一个LI，它会显示该子菜单。向下移动到子菜单，当您将鼠标悬停在每个元素上时，它将保持不变。我有一个简单的jQuery.hover（）设置，但后来我遇到了问题。当在页面上时，“根”菜单项被赋予一个“当前页面”类，如果该类存在，我希望它在鼠标输出后静态显示该子菜单。

希望我解释得那么好。我只是将一个变量抛入悬停函数，所以在mouseout上它在当前页面的子菜单上运行了一个.show（）。简单。除了当我在子菜单的各个LI之间移动鼠标时，它会变回当前页面的子菜单。所以我试图在这里添加一个基于another question的计时器元素。这让事情变得更糟 - 现在这个子菜单并没有消失。

这是我的CSS，标记和JS ......我怎么能正常工作？

标记：

<div id="menu">
<div id="navbar">
    <ul id="firstmenu">
        <li>
            <a href="http://localhost/site/pageone">page one</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>

        <li>
            <a href="http://localhost/site/pagetwo">barely there</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li class="current-page">
            <a href="http://localhost/site/pagetwo">kith & kin</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>

        </li>
        <li>
            <a href="http://localhost/site/pagethree">focal point</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li>
            <a href="http://localhost/site/pagefour">products</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li>
            <a href="http://localhost/site/pagefive">clients</a>
        </li>

    </ul>
</div></div>

这是CSS：

    #navbar {
     margin: 0;
     padding: 0;
     border: 0;
     text-align: center;
 }

 #firstmenu {
    margin: 6px auto 0 auto;
    font-size: 16px;
    list-style-type: none;
    letter-spacing: -1px;
 }

 #firstmenu li {
    display: inline;
    position:relative;
    overflow: hidden;
    text-align: center;
    margin-right: 10px;
    padding: 5px 15px;
 }

 #firstmenu a {
    text-decoration: none;
    outline: none;
    color: black;
    font-weight: 700;
    width: 75px;
    cursor: pointer;
 }

.current-page {
     color: white;
     background: url(../images/down_arrow.png) bottom center no-repeat;

}
.current-page a {
     color: white;
     border-bottom: 1px solid black;
}

#firstmenu .current-page a {
    color: white;
}

#firstmenu li.hover {
     color: white;
     background: url(../images/down_arrow.png) bottom center no-repeat;
}
#firstmenu li.hover a {
     color: white;
     border-bottom: 1px solid black;
}

#firstmenu li ul li.hover {
     color: white;
     background: none;
}
#firstmenu li ul li.hover a {
     color: white;
     border-bottom: none;
     text-decoration: underline;
}

#firstmenu li ul {
    width: 900px;
     color: white;
     font-size: .8em;
     margin-top: 3px;
     padding: 5px;
     position: absolute;
     display: none;
}

#firstmenu li ul li {
    list-style: none;
    display: inline;
    width: auto;
}

#firstmenu li ul li a {
    color: white;
    font-weight: normal;
    border: none;
}

.sub-current-page {
    font-weight: bold;
    text-decoration: underline;
}

#firstmenu li ul li.sub-current-page a {
    font-weight: bold;
}

最后，我的所有工作JS（当然是在$（document）.ready（）中）：

// Initialize some variables
    var hideSubmenuTimer = null;
    var current_page;
$('.current-page ul:first').show();

    // Prep the menu
    $('#firstmenu li').hover(function() {
        // Clear the timeout if it exists
        if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }

        // Check if there's a current-page class set
        if($('li.current-page').length > 0) {
            current_page = $('li.current-page');
        } else {
            current_page = false;
        }

        // If there's a current-page class, hide it
        if(current_page) { current_page.children('ul:first').hide(); }

        // Show the new submenu
        $(this).addClass('hover').children('ul:first').show();

    }, function(){
        // Just in case
        var self = this;
        // Clear the timeout if it exists
        if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }

        // Check if there's a current-page class set
        if($('li.current-page').length > 0) {
            current_page = $('li.current-page');
        } else {
            current_page = false;
        }

        // Set a timeout on hiding the submenu
        hideSubmenuTimer = setTimeout(function() {
            // Hide the old submenu
            $(self).removeClass('hover').children('ul').hide();

            // If there's a current-page class, show it
            if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); }
        }, 500);
    });

那么我做错了什么？

作为旁注，我正在使用$（'。current-page ul：first'）。show（）因为如果我在CSS中给.current-page任何“显示”设置，它确实定位了它奇怪的是在页面上。

Answer 1

答案是脚本试图在子菜单的LI上运行hover / mouseenter /任何函数。通过给每个根菜单LI提供他们自己的类，它现在可以工作了。这样就不会调用子菜单LI上的函数了。这是完成的功能：

$('#firstmenu .root-item').mouseenter(function() {
    $(this).addClass('hover').children('ul:first').show();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').hide();
    }
}).mouseleave(function() {
    $(this).removeClass('hover').children('ul').hide();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').show();
    }
});

Answer 2

你为什么要搞乱超时？你应该.toggle()吗？

Answer 3

我把它重写为不使用悬停，但鼠标悬停和鼠标移除。不确定你是否喜欢它，但这里是代码：

$(document).ready(function(){
          $(".submenu").hide();
          $("li").mouseover(function(){
            $(this).find('.submenu').show();
            });
          $("li").mouseout(function(){
            $(this).find('.submenu').hide();
            })
});

编辑：我花时间查看您的代码并找到了违规行：

#firstmenu li {
    display: inline;

由于嵌套列表位于第一个菜单div内，因此也适用于它们。无法放置嵌套的嵌套列表，因此不再将其作为其dom parent的子项放置在布局引擎中。结果是，对子菜单进行鼠标操作仍然被认为是笼罩在其dom父级（由于冒泡），但在列表项之间，您将不再将鼠标置于dom父级之上（因为它在原始设计中）。您需要重新考虑布局设计，因为它现在打破了布局引擎。

您可能还应该重新考虑将列表用作表格...

jQuery悬停菜单没有消失

3 个答案: