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()等等。

对这个简单（可能）的问题有点帮助吗？

Answer 1

替换：

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

使用：

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

Here是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>

Answer 2

嗯，也许这有效：

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

几个类上的jquery slideToggle（）

2 个答案: