[jQuery] Re: why is mouseleave triggering when i enter a child, when i have slidedown

Sun, 26 Jul 2009 19:08:38 -0700

did you even read reply to earlier thread you started on this before you started a new thread with exact same thing?

http://groups.google.com/group/jquery-en/browse_thread/thread/a13aeb0acf13ba73/b3242e5068c69dbf?lnk=gst&q=iceangel89#b3242e5068c69dbf

iceangel89 wrote: 
i am trying to develop my own accordion/sliding menu.

i found that seem to trigger when i am sliding down an "inner" menu.
since its "inner", my mouse definately has not left #mainnav

my test page http://iceangel89.5gigs.net/test.html

without that annoying test alert http://iceangel89.5gigs.net/test_1.html

i also noticed that it triggers when i enter the 4th "Link" which
triggers the slidedown of an inner ul. when i disable the sliding
effects, and make inner uls display notmally, when i move in and out
of child elem's no such problem

$("#mainnav").mouseleave(function() {
    alert("mouseleave #mainnav");
});

more complete source:

$(function() {
    $("#mainnav > li > a").hover(mouseOver);
    $("#mainnav").mouseleave(function() {
        alert("mouseleave #mainnav");
    });
});
function mouseOver() {
    $(this).next("ul").slideDown("fast", function() {
        $("li:has(ul) > a", this).hover(mouseOver);
    });
}

#mainnav, #mainnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #bbb;
}
#mainnav ul {
    display: none;
    margin: 5px 10px;
}
#mainnav a {
    display: block;
    padding: 5px 10px;
    margin: 2px 0;
    background: yellow;
}

<ul id="mainnav">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li>
        <a href="">Test</a>
        <ul>
            <li><a href="">Test</a></li>
            <li>
                <a href="">Test 1</a>
                <ul>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                </ul>
            </li>
            <li><a href="">Test</a></li>
        </ul>
    </li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
</ul>

Reply via email to