jquery - 使用 jQuery slideToggle 调用的 CSS 类管理

Question

我这里有一段代码在一个 html 文件中重复了多次。

<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>

jQuery 用于向下滑动 messageBody。

$('#slideDown').click(function() {
  $('#messageBody').slideToggle('slow');
});

我的问题是，我怎样才能得到它，以便当我点击一条消息的阅读标签时，它只会向下滑动其 div 内的 messageBody？

Answer 1

如果将 ID 更改为这样的类，则可以修复并减少代码:

HTML

<div class="message">
   <label class="slideDown"> Read </label>
   <p class="messageBody hidden"> Body </p>
</div>
<div class="message">
   <label class="slideDown"> Read </label>
   <p class="messageBody hidden"> Body </p>
</div>

JS

$('.slideDown').click(function() {
  $(this).next('.messageBody').slideToggle('slow');
});

这是一个工作示例:http://jsfiddle.net/rtZsJ/ .