jquery上下滑动多个div

Question

我的代码是：

的JavaScript：

$(".Head").click(function () {
      if ($(".Body").is(":hidden")) {
        $(".Body").slideDown('fast');
      } else {
        $(".Body").slideUp('fast');
      }
    });

HTML：

<div class="Head">
Heading
</div>
<div class="Body">
Content
</div>

现在我的问题是我有相似名称的多个div标签并格式化Head和Body 类重复，当我单击一个Head部分时，它会向上滑动它们如何使它们在特定的Body类中上下滑动？

Answer 1

你真的很亲密。这是一个jsfiddle，可以满足你的需要。

http://jsfiddle.net/Sze8D/

您需要在使用.next()

点击标题后抓住下一个正文

Answer 2

尝试使用$.next()，如下所示：

$(".Head").click(function () {
    var $targetBody = $(this).next('.Body');
    if ($targetBody.is(":hidden")) {
        $targetBody.slideDown('fast');
    } else {
        $targetBody.slideUp('fast');
    }
});

在这里小提琴：http://jsfiddle.net/vJn8w/

Answer 3

让您的选择器更具体;这可能需要为元素添加id属性，然后使用jQuery ID selector。为父元素提供id属性...

HTML

<div id="tehParent"><div class="Body"><!-- ... --></div></div>

的JavaScript

$("#tehParent .Body").slideDown('fast');

---

...或者给元素本身id：

HTML

<div id="tehBody" class="Body"><!-- ... --></div>

的JavaScript

$("#tehBody.Body").slideDown('fast');