Question

我的html标记如下：

<ul class="top-nav">
   <li id="page-1"><a href="/">HOME</a>
        <ul class="page-1 current">
                <li><a title="" href="#">FEATURES</a></li>
                <li><a title="" href="#">ABOUT US</a></li>
                <li><a title="" href="#">CONTACT</a></li>
        </ul>
    </li>

    <li id="page-2"><a title="" href="road">ROAD</a>
        <ul class="page-2">
                <li><a title="" href="#">ROAD BIKE:</a></li>
                <li><a title="" href="#">BIKE</a></li>
                <li><a title="" href="#">COMPONENTS</a></li>
                <li><a title="" href="#">APPAREL</a></li>               
        </ul>
    </li>
</ul>

鼠标悬停在第一级li（jQuery（'。top-nav li'））上，它应显示其子级ul（jQuery（'。top-nav li ul'））

但问题是，当我将鼠标悬停在第一级li的子li元素上时，同样的事件也会发生在子li上。我想为子li元素避免这个事件（即（jQuery（'。top-nav li ul li'））。

Answer 1

您可以像这样解决立即元素：

$("ul.top-nav > li"); // only the top-level li's

将jquery效果应用于父li但不应用于child li元素

1 个答案: