jQuery针对所有列表元素，而不是仅针对一个列表元素

我的下拉列表在切换整个

li

元素集时遇到问题。我只是想知道如何将jQuery更改为针对父级的第一个子级ul，在本例中是我单击的

span

元素

有没有简单的方法来解决这个问题？我在下面附上了一个JSFiddle，也不完全清楚为什么这个列表有一个巨大的左边距，但这似乎微不足道

HTML文件

<dl id="sample" class="dropdown">
    <dt><a href="#"><span>COUNTRIES</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
            <li><a href="#">France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
            <li><a href="#">Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
            <li><a href="#">India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>

        </ul>
    </dd>

        <dt><a href="#"><span>PLANETS</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">EARTH<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
            <li><a href="#">SATURN<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
            <li><a href="#">MARS<img class="flag" src="de.png" alt="" /><span class="value">MR</span></a></li>
            <li><a href="#">PLUTO(JK)<img class="flag" src="in.png" alt="" /><span class="value">PL</span></a></li>

        </ul>
    </dd>


</dl>
<span id="result"></span>​

---

在

单击处理程序中，不能只使用类说明符-这就是为什么您的操作会影响每个匹配元素

您需要遍历DOM树（即
.parent（）
，
.child（）
等）以找到要修改的相关元素

例如，在此处理程序中：

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

您可能希望显示包含单击的
的
后面的
dd>ul
元素：

尽管如此（根据注释），如果您的HTML标记保持原样，您可以将其简化如下，因为只有一个
，并且
始终跟随
：

在
单击处理程序中，不能只使用类说明符-这就是为什么您的操作会影响每个匹配元素

您需要遍历DOM树（即
.parent（）
，
.child（）
等）以找到要修改的相关元素

例如，在此处理程序中：

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

您可能希望显示包含单击的
的
后面的
dd>ul
元素：

尽管如此（根据注释），如果您的HTML标记保持原样，您可以将其简化如下，因为只有一个
，并且
始终跟随
：

请在此处包含您的（简化）标记和代码，而不仅仅是指向小提琴的指针。请在此处包含您的（简化）标记和代码，而不仅仅是指向小提琴的指针。是的，我只是想知道针对父span类的第一个子UL元素的语法是什么。在本例中，$（this）.parent（）.next（'dd'）.child（'UL'）.first（）.toggle（）可以简化为$（this）.parent（）.next（）.children（）.toggle（）@BartoszGórski的确，它可以简化-我认为值得显示显式选择器是的，我只是想知道针对父span类的第一个子UL元素的语法是什么。在本例中，$（this）.parent（）.next（'dd'）.child（'UL'）.first（）.toggle（）可以简化为$（this.parent（）.next（）.children（）.toggle（）@BartoszGórski的确，它可以简化-我认为值得显示显式选择器
$(".dropdown dt a").click(function() {
    $(this).parent().next('dd').children('ul').first().toggle();
});

$(".dropdown dt a").click(function() {
    $(this).parent().next().children().toggle();
});