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

$（"。subTopNavli"）。hide（）;を試してみませんか。？ulを非表示にしていますが、「display：block」の付いたliアイテムは変更されていません。やってみます。

于 2012-12-25T23:55:37.667 に答える