1

我有一些看起来像这样的 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>

DD单击 GO 链接时设置为隐藏 我有一些代码可以将 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();
});

虽然我还没有成功。

4

3 回答 3

1

您的想法是正确的，但是您尝试过的方法并没有按照您期望的方式运行。最简单的选择可能是上到父级，然后找到合适的元素：

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

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

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

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

请注意，如果您的 DOM 结构可能会更改，您可能希望使用closest到达dl元素，然后使用.find来查找dd（请参阅@Nicola Peluchetti 的回答）。

于 2011-10-03T08:43:17.403 回答
0

你有没有尝试过：

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

你不能使用 next() 因为你的链接只有一个 SPAN 作为兄弟，你不能使用最接近的，因为它只是沿着树走

于 2011-10-03T08:41:37.553 回答
0

尝试;

    $(this).parent().siblings("dd").slideToggle(defaults.speed);
于 2011-10-03T08:42:18.067 回答