jquery扩展和缩小行仅适用于第一行

Question

我尝试在此处设置一行以扩展用户点击并在用户点击另一行或再次点击时向上滑动

我在下面尝试了以下代码，它似乎只适用于第一行而不是休息行

＆＃13;

＆＃13;

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

＆＃13;

.details { display: none; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

1. 使用class而不是ID。
2. ID在上下文中应该是唯一的
＆＃13;
＆＃13;
$(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');
    }
  });
});
＆＃13;
.details {
  display: none;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;