jQuery行展开收缩功能仅第一行生效问题求助

嘿，你遇到的问题根源很明确——重复使用了同一个ID！在HTML规范里，id属性是页面内唯一的标识符，绝对不能给多个元素设置相同的id。jQuery的$('#sRow')选择器只会匹配页面中第一个带有这个ID的元素，这就是为什么只有第一行能响应点击，其他行完全没反应的原因。

修正步骤 #

• 把所有行的id="sRow"替换成class="sRow"（class属性允许在多个元素上重复使用）
• 修改jQuery的选择器，从$('#sRow')改为$('.sRow')，这样就能选中所有带这个类的行元素了

完整修正代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sRow" style="padding: 5px 5px 5px 5px; border: 2px #000 solid;">
  Something here
  <div class="details">
    <hr>
    some detail
  </div>
</div>
<br>
<div class="sRow" style="padding: 5px 5px 5px 5px; border: 2px #000 solid;">
  Something else here
  <div class="details">
    <hr>
    some other detail
  </div>
</div>
<br>
<div class="sRow" style="padding: 5px 5px 5px 5px; border: 2px #000 solid;">
  Something else here
  <div class="details">
    <hr>
    some other detail
  </div>
</div>

CSS

.details { display: none; }

JavaScript

$(document).ready(function() {
  $('.sRow').click(function() {
    $(this).find('.details').slideToggle(600); // 用slideToggle简化显示/隐藏的判断逻辑
  });
});

顺带提一句，我把你原来判断可见性再执行滑动的代码，替换成了slideToggle方法——它会自动根据元素当前状态切换显示或隐藏，代码更简洁高效~

内容的提问来源于stack exchange，提问作者hackerman