Question

<ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>

    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a>
            <ul> // level 2
            <li><a href="#">x3</a></li>
            <li><a href="#">x4</a></li>
            </ul>
            </li>

            <li><a href="#">Meet the team</a>
<ul> // level 2
            <li><a href="#">x1</a></li>
            <li><a href="#">x2</a></li>
            </ul></li>
        </ul>
</li>
</ul>

使用jquery我想选择2级的ul 就像我徘徊在'产品'上然后我想只选择它旁边的ul [level 2]而不是所有2级。

我使用jQuery代码来选择这样的

$('#nav li ul li').mouseover(function(){
    $(this).children('ul').css('opacity','.5');
});

但是这个代码对2级别的影响我想要选择<li>里面的悬停的ul ......

Answer 1

使用儿童组合选择器：

尝试此操作

$('#nav > li > ul > li').mouseover(function(){
    $(this).children('ul').css('opacity','.5');
});

这意味着它只会选择作为无序列表的直接子项的列表项。换句话说，它只在标记结构中看起来只有一个级别，而不是更深。

Answer 2

可以用CSS：

jsfiddle demo

#nav > li > ul > li:hover > ul {opacity:.5;}

如何在jquery中选择它旁边的子节点

2 个答案: