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

Question

我想像这样制作一个可折叠的 DIV:
如果您单击图片(在表格中并带有 show 类)，隐藏的 div 会向下滑动(带有 content 类的)及其内容，如果您单击隐藏按钮或页面上的任何其他位置，content div 将向上滑动。
我想在页面上使用多个表格和隐藏的 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() {
  });

});