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如果这对你有帮助，但是......

试用：包含选择器（http://api.jquery.com/contains-selector/）
你可以使用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>

帮助jQuery菜单

3 个答案: