JQuery-独立显示/隐藏具有同一类的多个div

Question

我想制作一个可折叠的DIV，如下所示：
如果你点击图片（在表中，show类附带），隐藏的div会随着它的内容向下滑动（content类附带的），如果你点击隐藏按钮或页面上的其他任何地方，contentdiv会向上滑动
我想在页面上使用多个表和隐藏的div（使用相同的类），所以我想确保独立打开它们。

这是我的JSFiddle文件，希望有人能帮忙
提前感谢！

Answer 1

您可以通过数据属性实现

<table width="502" style="border:1px solid black; background-color:white;">
  <tr>
    <td align="center" valign="middle" width="300" style="padding:5px">
      Blablabla
    </td>
    <td width="200">
      <a class="show" data-id="1" href="javascript:void(0)"><img src="http://www.placehold.it/200x200"></a>
    </td>
  </tr>
</table>
<div class="content" data-id="1">
  <div class="content-inner">
    <img src="http://www.placehold.it/400x400">
    <p>
      More blablabla
    </p>
    <p class="hide" style="padding-top:50px">Hide</p>
  </div>
</div>
<table width="502" style="border:1px solid black; background-color:white;">
  <tr>
    <td align="center" valign="middle" width="300" style="padding:5px">
      Blablabla
    </td>
    <td width="200">
      <a class="show" data-id="2" href="javascript:void(0)"><img src="http://www.placehold.it/200x200"></a>
    </td>
  </tr>
</table>
<div class="content" data-id="2">
  <div class="content-inner">
    <img src="http://www.placehold.it/400x400">
    <p>
      More blablabla
    </p>
    <p class="hide" style="padding-top:50px">Hide</p>
  </div>
</div>

并像这个一样更改JS

$('.show, .hide').click(function(){
var id = $(this).data('id');
  $('.content[data-id="'+id+'"]').slideToggle('2000', "swing", function() {
  });
});