CODEWITHSUNDEEP
jquerycsshtml-lists
EvilJordan
EvilJordan

Reputation: 665

Why won't this jquery.hide() function work on this UL element?

The submenu appears successfully, but will not hide with the mouseleave function. Running a console.log() shows an event WILL fire at the correct moment when the mouse exits the <ul>, but it won't hide for some reason. I can, however, change other styles (like the background of the <ul> to red or something.) Very puzzling...

$(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; }

Upvotes: 0

Views: 1307

Answers (2)

charlietfl
charlietfl

Reputation: 171669

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/

Upvotes: 2

blpsilva
blpsilva

Reputation: 69

Why don't you try $(".subTopNav li").hide(); ? You're hiding the ul, but the li items with "display: block" remain unchanged. I'd try that..

Upvotes: 0

Related Questions