jQuery 选择器：如何选择此元素的子元素

Question

所以，我的代码看起来像这样：

<span class="comic_menu mid_menu_title">    
            <ul>
            <li class="level-0 page_item page-item-264"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=264" title="Ca$h Rulez">Ca$h Rulez</a>
<ul class='children'>
    <li class="level-1 page_item page-item-266"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=266" title="1994">1994</a></li>

    <li class="level-1 page_item page-item-268"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=268" title="1995">1995</a></li>
    <li class="level-1 page_item page-item-270"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=270" title="1996">1996</a></li>
    <li class="level-1 page_item page-item-272"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=272" title="1997">1997</a></li>
    <li class="level-1 page_item page-item-274"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=274" title="1998">1998</a></li>
    <li class="level-1 page_item page-item-276"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=276" title="1999">1999</a></li>
    <li class="level-1 page_item page-item-278"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=278" title="2000">2000</a></li>

    <li class="level-1 page_item page-item-280"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=280" title="2001">2001</a></li>
</ul>
</li>
<li class="level-0 page_item page-item-101"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=101" title="Furlough">Furlough</a>
<ul class='children'>
    <li class="level-1 page_item page-item-103"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=103" title="page 66">page 66</a></li>
    <li class="level-1 page_item page-item-105"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=105" title="page 67">page 67</a></li>
    <li class="level-1 page_item page-item-107"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=107" title="page 68">page 68</a></li>

    <li class="level-1 page_item page-item-109"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=109" title="page 69">page 69</a></li>
    <li class="level-1 page_item page-item-111"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=111" title="page 70">page 70</a></li>
    <li class="level-1 page_item page-item-113"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=113" title="page 71">page 71</a></li>
    <li class="level-1 page_item page-item-115"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=115" title="page 72">page 72</a></li>
    <li class="level-1 page_item page-item-117"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=117" title="page 73">page 73</a></li>
    <li class="level-1 page_item page-item-119"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=119" title="page 74">page 74</a></li>

    <li class="level-1 page_item page-item-121"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=121" title="page 75">page 75</a></li>
</ul>
</li>

它只是“菜单>级别0>子项>级别1”。我有一些看起来像这样的 jQuery：

$(".level-0 > a").click(function() {
           $('.level-0 > .children').toggle();
           return false;
       });

我确信比我聪明的人都会看到问题： onClick 它会打开每个“子”元素。我如何要求 jQuery 打开我点击的“level-0”

元素的“children”元素？

抱歉造成混乱。总而言之，非常感谢您的帮助。

Answer 1

您想要使用 $(this) 和 .siblings() 在这种情况下要相对地查找

，如下所示：

$(".level-0 > a").click(function() {
   $(this).siblings('.children').toggle();
   return false;
});

你可以在这里测试一下，或者添加一些动画，像这样。

$(this) 是当前对象的 jQuery 包装版本，并且由于

是 <您点击的;a>，.siblings() 是你想找什么就找什么。