CODEWITHSUNDEEP
jquerymenuaccordion
Raul Valverde
Raul Valverde

Reputation: 55

Menu vertical accordion jQuery list change item's

I have a vertical menu accordion and it expands and displays children on hover as shown in mark-up below:

<ul>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
</ul>

Here's an example: http://jsfiddle.net/A8CPd/

The problem is that it does not hold the hover state when you mouse over to children.

Upvotes: 0

Views: 448

Answers (1)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

Well there is a problem in how you attach your hover-listener. You attach the listener only to the anchor within the list-item. When you then try to hover one of the submenu-items, you will inevitably leave the anchor element, thus causing the menu to collapse again.

Instead I believe this is what you are looking for:

$("#accordion > li").hover(function(){
    $(this).find("ul").slideToggle(300);
});

Now we attach the the listener to the entire li element, which also contains the submenu items. Thus the menu will stay open while you hover those as well.

Updated your fiddle as well: http://jsfiddle.net/A8CPd/32/

Upvotes: 1

Related Questions