javascript - jquery 扩展和收缩行只适用于第一个

Question

我试图在这里制作一行以在用户点击时展开并在用户点击另一行或再次点击时向上滑动，

我试过下面的代码，它似乎只适用于第一行而不适用于其余行

$(document).ready(function() {
  $('#sRow').click(function() {
    if (!$(this).find('.details').is(":visible")) {
      $(this).find('.details').slideDown('600');
    }else{
      $(this).find('.details').slideUp('600');
    }
  });
});

.details { display: none; }

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

谢谢

Answer 1

1. 使用类而不是 ID。
2. ID 在上下文中应该是唯一的

$(document).ready(function() {
  $('.sRow').click(function() {
    $('.details:visible').slideUp('600');
    if (!$(this).find('.details').is(":visible")) {
      $(this).find('.details').slideDown('600');
    } else {
      $(this).find('.details').slideUp('600');
    }
  });
});

.details {
  display: none;
}

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