如何从 jQuery 选择中排除这些元素？

Question

我的 jQuery：

$("ul.dropdown ul").slideDown("slow");
$("ul.dropdown ul ul").children().hide();

这会导致匹配第二个选择器的选择器显示一小段时间。如何从第一组中排除第二组，只显示第一组？

---

我的 HTML：

    <ul class="dropdown">
        <li style="margin: 0px">
            <span id="header">
                <img src="back.gif" alt='background' style="border:none;" />                        
                <span style="position: absolute; top: 5px; left: 2px;">
                    <img src="button.gif" style="border:none;" />
                </span>                 
                <span style=" position: absolute; top: -5px; left: 70px;">
                    <p style="background-color: white; width: 200px; height: 20px; font-size: 1.2em; border: 2px solid blue">Menu</p>
                </span>
            </span>
            <ul class="sub_menu">
                 <li><a href="#">Artificial Turf</a></li>
                 <li><a href="#">blah</a></li>
                 <li id="1">
                    <a id="1.1" href="#">Batting Cages</a>
                    <ul id="2">
                        <li><a href="#">Indoor</a></li>
                        <li><a href="#">Outdoor</a></li>
                    </ul>
                 </li>
                 <li><a href="#">Benches &amp; Bleachers</a></li>
                 <li><a href="#">Communication Devices</a></li>
                 <li><a href="#">Dugouts</a></li>
                 <li><a href="#">Fencing &amp; Windscreen</a></li>
                 <li><a href="#">Floor Protectors</a></li>
                 <li><a href="#">Foul Poles</a></li>
                 <li><a href="#">Netting</a></li>
                 <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
                 <li><a href="#">Outdoor Signs</a></li>
                 <li><a href="#">Padding</a></li>
                 <li><a href="#">Scoreboards</a></li>
                 <li><a href="#">Shade Structures</a></li>
                 <li><a href="#"> - VIEW ALL - </a></li>
            </ul>
        </li>
    </ul>

Answer 1

这正是the 'not' method 的用途：

$('ul.dropdown ul').not('ul.dropdown ul ul').slideDown('slow');

Answer 2

这可能会起作用：

$("ul.dropdown > li > ul").slideDown("slow");

">" 仅表示直接子代 (http://docs.jquery.com/Selectors/child#parentchild)。所以只要你的层次结构是这样的（在你刚才的编辑之后，它看起来确实如此）：

<ul>
  <li>
    <ul>
..

它很可能会起作用。希望相关的变化是显而易见的......

Answer 3

这可以工作。

$("ul.dropdown ul:not(ul > ul)").slideDown("slow");
$("ul.dropdown ul ul").children().hide();