几个类上使用jquery的slideToggle()函数

Question

我有一个列表：

 ...
 <li>
      <a href="#" class="slide"></>Click me</a>
      <div class="newsitem">
           ...some content here
      </div>
 </li>
 <li>
      <a href="#" class="slide"></>Click me</a>
      <div class="newsitem">
           ...some content here
      </div>
 </li>
 ...

我想像这样使用slideToggle：

$(".slide").click(function() {
     $(".newsitem").slideToggle("fast");
     return false;
});

事情是这样的，我希望不同的slide类只需slideToggle下一个newsitem类。我尝试使用.closest()、.nextSibling()等方法。

对于这个简单（可能）的问题，需要一些帮助吗？

- larschanders

Answer 1

替换：

$(".newsitem").slideToggle("fast");

使用:

$(this).next(".newsitem").slideToggle('fast');

这里是next()方法的文档：

获取匹配元素集合中每个元素紧邻的后续同胞元素。如果提供了选择器，则仅检索与其匹配的下一个同胞元素。

这是一个可行的示例：http://jsfiddle.net/andrewwhitaker/3DqNF/

此外，你的HTML代码有一些无效。以下是更正后的HTML：

<ul>
    <li>
        <a href="#" class="slide">Click me</a>
        <div class="newsitem"></div>
    </li>
    <li>
        <a href="#" class="slide">Click me</a>
        <div class="newsitem"></div>
    </li>
</ul>

- Andrew Whitaker

---

谢谢，非常好用，恰好是我想要的解决方案。实际上，我做了完全相同的事情，但是使用的是 nextSibling()，但那并没有起作用... - larschanders

好吧，我感觉很蠢。其实并没有叫做nextSibling()的东西，当然它不起作用了 :)而且我实际上有正确的HTML，只是懒得在这里写出所有的标签。再次感谢。 - larschanders

@Anders：我认为 nextSibling()（一个DOM节点属性）不能正常工作的原因是它实际上获取了被点击的<a>标签下面的文本节点。也就是说，当你点击<a>时，你获取到的是包含“Click me”文本的文本节点。虽然不直观，但这是jQuery可以帮助解决的情况 :)。 - Andrew Whitaker

@Anders：nextSibling()是一个函数，只不过不是jQuery函数：https://developer.mozilla.org/En/DOM/Node.nextSibling - Andrew Whitaker

Answer 2

嗯，也许这个可以工作：

$(".slide").each(function(){
  $(this).click(function() {
    $("this > .newsitem").slideToggle("fast");
    return false;
  });
});

- Michael

---

这样做不起作用，因为“this”不是相关的CSS选择器。您的选择字符串将匹配类型为“this”的元素内部具有类“newsitem”的元素...而实际上并不存在这样的元素。 - Dancrumb

@dancrumb 这将指的是由每个循环传递的元素。因此，它应该是 .slide 元素之一。但我认为 newsitem 应该在 .slide 元素内部，没有仔细看。 - Michael

我指的是这一行代码：$("this > .newsitem")。在这种情况下，“this”只是一个字符串，而不是任何引用。 - Dancrumb