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

Question

My html markup is as below:

<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>

on mouseover over first level li (jQuery('.top-nav li')), it should show its child ul (jQuery('.top-nav li ul'))

But problem is that , when I mouseover on child li elements of first level li, same event occur for child li also. I want to avoid this event for child li elements (ie, (jQuery('.top-nav li ul li')).

Answer 1

您可以像这样处理立即元素：

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