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() {
  });

});

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

1 个答案: