3zzy 3zzy - 2 months ago 6
jQuery Question

Help with jQuery menu

Html:

<ul id="menu">
<li>Menu 1</li>
<li>Menu 2
<ul>
<li class="submenu">something</li>
</ul>
</li>
<li>Menu 3</li>
</ul>


jQuery:

$('#menu > li:has(.submenu)').hover(function() {
$(this).children('ul').show().addClass('active');
}, function() {
$(this).children('ul').hide().removeClass('active');
});


http://jsfiddle.net/mXTzy/

Now if
.submenu
is being shown, I want the parent
li
to have the class
active
(and removed on mouseout).

I'd appreciate any help with this.

Many thanks

Answer

Okay, figured:

$('#menu > li:has(.submenu)').hover(function() {
    $(this).addClass('active').children('ul').show();
}, function() {
    $(this).removeClass('active').children('ul').hide();    
});

.. a bit ugly though.

Comments