帮助使用jQuery菜单

Question

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/

现在，如果正在显示.submenu，我希望父li有类active（和删除在mouseout上）。

我很感激任何帮助。

非常感谢

Answer 1

好了，想通：

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

..有点难看，但。

Answer 2

IDK的如果这将帮助您或没有，但...

1. 尝试使用：包含选择器（http://api.jquery.com/contains-selector/）
2. 可以使用toggleClass（ http://api.jquery.com/toggleClass/）

Answer 3

你是在找这个吗？

jsFiddle

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

#meun li { float: left; } 
 
#menu li a { float; left; padding:10px; } 
 
#menu li ul { display: none; } 
 
#menu li.active { background:#dd0; }

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