Question

我有一些看起来像这样的HTML，

<dl class="dropdown">  
    <dt><span>Gender</span><a href="">Go</a></dt>
    <dd class="shadow_50">  
        <ul>  
            <li><a href="#"><span class="option">male</span><span class="value">1</span></a></li>  
            <li><a href="#"><span class="option">female</span><span class="value">2</span></a></li>
       </ul>  
    </dd>
 </dl>

单击GO链接时，DD被设置为隐藏我有一些代码可以向下或向下滑动DD。但是我的问题是，当我在页面中有多个实例时，只需单击一下即可打开页面上的所有DD，如何定位最接近点击的DD，

我尝试了以下内容，

$(".dropdown dt a").click(function(e) {
    $(this).closest("dd").slideToggle(defaults.speed);
e.preventDefault();
});

还有这个，

$(".dropdown dt a").click(function(e) {
    $(this).next("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

虽然我没有成功。

Answer 1

你有正确的想法，但你尝试过的方法并不像你期望的那样运作。最简单的选择可能是去父母，然后找到合适的元素：

$(this).parent().next().slideToggle(defaults.speed);

您的尝试因以下原因失败：

.closest遍历DOM（它向上看，所以它检查父级，然后检查所有其他祖先，直到找到匹配）。在您的情况下，所需元素不是this的祖先，因此不起作用。

.next获取当前匹配元素的以下兄弟。在您的情况下，没有以下兄弟，因为a是dt中的最后一个元素。

请注意，如果您的DOM结构可能会发生变化，您可能希望使用closest来访问dl元素，然后使用.find查找dd（见@Nicola Peluchetti的回答）。

Answer 2

你试过了吗？

$(".dropdown dt a").click(function(e) {
    $(this).closest("dl").find("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

你不能使用next（），因为你的链接只有一个SPAN作为兄弟，你不能使用最接近因为它只是走在树上

Answer 3

尝试;

    $(this).parent().siblings("dd").slideToggle(defaults.speed);

遍历DOM的麻烦

3 个答案: