在 jQuery 中突出显示一个列表项而不突出它的子项（另一个 UL）答案

【问题标题】：Highlight a list item without highlighting it's children (another UL) in jQuery在 jQuery 中突出显示一个列表项而不突出它的子项（另一个 UL）
【发布时间】：2011-06-29 06:05:21
【问题描述】：

我正在尝试将悬停效果应用于 UL，但作为一个列表项的子项的 UL 也会获得我不想要的效果。我尝试了各种方法，例如使用 > 符号和 .not() 选择器，但没有成功。

这是我的（简化的）HTML：

        <ul id="menu">
            <li class="menubox"><a href="#">Home</a></li>
            <li class="menubox"><a href="#">Over Ons</a></li>
            <li class="menubox"><a href="#" id="varianten">Producten</a>
                <ul id="menu_varianten">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li class="menubox"><a href="#">Forum</a></li>
        </ul>

一些可能相关的 CSS sn-ps：

#menu {
position: relative;
width: 250px;
}

ul#menu{
list-style: none;
margin-left: 0;
padding-left: 0;
}

ul#menu li a{
display: block;
text-decoration: none;
height: 40px;
}

#menu_varianten{
list-style: none;
display: none;
margin-left: 0;
padding-left: 0;
}

ul#menu_varianten li a{
padding-left: 4em;
height:30px;
}

这里是 jQuery：

$("ul#menu > li").hover(
    function() {
        $(this).stop(true, true).animate({fontSize:"1.4em"}, 150);
    },
    function() {
        $(this).stop(true, true).animate({fontSize:"1.0em"}, 150);
    });

我也尝试了选择器 ("ul#menu > li").not("#menu_varianten")，但不幸的是它不起作用。有想法的人吗？

【问题讨论】：

Wouter，你应该去 jsfiddle.net 并把你的 html/css/js 放在适当的窗格中，然后我们可以看到一个现场演示。非常酷的网站！
感谢 MrBoJangles，我听说过这个网站，但从未尝试过。感谢这里的所有解决方案，我一定会在下次提问之前尝试一下，并在以后的问题中使用它。

标签： jquery css jquery-selectors parent-child selector

【解决方案1】：

您可以尝试只扩展第一个锚点。

保持您的 HTML 和 CSS 不变，并将 javascript 更改为：

$("ul#menu li").hover(

function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

http://jsfiddle.net/RCtFU/1/

【讨论】：

+1，这使父菜单项也保持放大，一个不错的奖励。
这是一个不错的解决方案，但请在此处发布解决方案的内容，而不是仅在其他网站上发布。
@eykanal，谢谢。我相信您使用 :not 的解决方案使用较少的选择器，因为它不使用 .find() 但我认为父级应该保持放大。
@patrick dw：好主意，我已将 javascript 添加到解决方案中。
非常感谢 Gazler，好东西。简单而优雅的解决方案。 Indead 很好地保持父级放大。

【解决方案2】：

您可以使用 css3 :not() 选择器：

$("ul#menu > li :not(ul)").hover(
function() {
    $(this).stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

见jsFiddle。

【讨论】：

感谢您的快速反应以及您对使用 :not() 选择器的建议，但我的子菜单仍在动画中，也在 jsFiddle 中。

【解决方案3】：

您可能想让每个子菜单成为每个父级的兄弟。 CSS 继承，所以这将是一个非常简单的问题避免。

示例： http://jsfiddle.net/RCtFU/

<li class="menubox">
    <a href="#" id="varianten">Producten</a>
</li>
<li class="menubox">  <!-- probably want to change the class -->
    <ul id="menu_varianten">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</li>

您需要做一些进一步的调整（不同的类等）以区分菜单和子菜单。

【讨论】：

感谢帕特里克的建议。我认为您的解决方案有一个缺点，即所有子菜单项一起被视为父列表的一个大列表项（如 jsFiddle 中所示）。要绕过这个，你需要更多的代码，所以我想我会去找 Gazler 的答案。但再次感谢。