jquery - jquery slideToggle() on several classes

Question

I have a list:

 ...
 <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>
 ...

I want to use slideToggle like this:

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

The thing is, is that I want the different slide classes to just slideToggle the next newsitem class. I've tried using .closest(), .nextSibling() and so on.

A little help with this easy (probably) problem?

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>

Answer 2

嗯，也许这有效：

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