Question

I have a problem I want to make a jquery submenu like this:

    <ul id="submenu" class="menu">
    <li class="item-1"><a href="test.html">Test 1</a></li>
    <li class="item-2 deeper parent">
        <a href="test.html">Test 2</a>
        <ul>
            <li class="item-xy"><a href="#">Test 1</a></li>
            <li class="item-xy"><a href="#">Test 1</a></li>
            <li class="item-xy"><a href="#">Test 1</a></li>
        </ul>
    </li>
    <li class="item-3 deeper parent">
        <a href="test.html">Test 3</a>
        <ul>
            <li class="item-xy"><a href="#">Test 1</a></li>
            <li class="item-xy"><a href="#">Test 1</a></li>
            <li class="item-xy"><a href="#">Test 1</a></li>
        </ul>
    </li>
    <li class="item-4"><a href="test.html">Test 4</a></li>
    <li class="item-5"><a href="test.html">Test 5</a></li>
</ul>

$("li.deeper ul").hide();
$("ul#submenu li.deeper").hover(function(event){
    var myClass = $(this).attr("class");
    var ulcl = myClass.replace("deeper parent","");
    event.stopPropagation();
    $("."+ulcl+" ul").slideToggle();
});   

It works but sometimes if you are near the li items with the mouse,
the child items start bubbling.
You can see it here:
http://jsfiddle.net/andrewwhitaker/ybVFj/

Can someon help me?

Thanks

Answer 1

It bubbles because when it begins to slide you get another mouseout event, this fires the toggle again. So, add some flag

your construct is a bit strange, why instead of

var myClass = $(this).attr("class");
var ulcl = myClass.replace("deeper parent","");
$("."+ulcl+" ul").slideToggle();

not use

if(!isSliding) {
    isSliding = true;
    $(this).find("ul").slideToggle(function(){isSliding = false;});
}

?

The code you referenced is different of the one you posted here.