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

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