0

子菜单出现成功，但不会随mouseleave功能隐藏。运行 console.log() 会显示一个事件将在鼠标退出的正确时刻触发<ul>，但由于某种原因它不会隐藏。但是，我可以更改其他样式（例如将背景更改<ul>为红色或其他东西。）非常令人费解...

$(document).ready(function() {
    $(".topLine").hover(function() {
        $(".subTopNav").hide(); //hide all potentially open submenus
        $(this).find(".subTopNav").show(); //show this submenu
    });
    $(".subTopNav").mouseleave(function() { //if mouse leaves the submenu
        $(this).hide(); //hide the open submenu (this is what isn't working)
        $(this).css('background-color','red'); //this works
    })
});

<li class="topLine">
<span class="topNavItem">Item 1</span>
<ul class="subTopNav">
    <li><a href="#">subItem 1</a></li>
    <li><a href="#">subItem 2</a></li>
    <li><a href="#">subItem 3</a></li>
</ul>
</li>

#topNavItems { display: inline; line-height: 40px; }
#topNavItems li { display: inline; font-weight: bold; margin-right: 45px; cursor: pointer; }
#topNavItems li a { text-decoration: none; color: #000000; }
.topLine { position: relative; }
.subTopNav { display: none; position: absolute; top: 20px; left: 25%; background-color: #000000; width: 145px; color: #FFFFFF; padding-left: 10px; }
.subTopNav li { display: block; color: #CCCCCC; font-weight: normal !important; font-size: 12px; line-height: 24px; margin-right: 0px !important; }
.subTopNav a { color: #CCCCCC !important; display: block; }
.subTopNav a:hover { color: #FFFFFF !important; }
4

2 回答 2

2

The problem is that hover() used with only one argument function will trigger the same function for both mouseenter and mouseleave

.hover( mouseenterHandler,mouseleaveHandler)

or

.hover( singleHandler/* triggers for both events*/)

Change your hover to mouseenter and code works

DEMO: http://jsfiddle.net/VhDyA/

API refrence: http://api.jquery.com/hover/

于 2012-12-26T00:02:56.213 回答
0

你为什么不试试 $(".subTopNav li").hide(); ? 您正在隐藏 ul，但带有“显示：块”的 li 项目保持不变。我会试试的。。

于 2012-12-25T23:55:37.667 回答