Question

我正在尝试在半自动生成的表中的另一个下面执行下拉表行。我搜索了一下，得知你无法直接为表格元素制作动画。我尝试将我的表包装在一个div中，动画也有效。

我现在的问题是，我真的不知道如何在循环特定部分时继续使用该div创建表格。它只是以某种方式弄乱了桌子。

<body>
<table>
    <tbody>
        <tr>

           // HEAD OF TABLE //

        </tr>

        {{FOREACH}}
        <tr>

        // ALWAYS VISIBLE TR //

        </tr>
        <tr class="hidden hideable{{$i.id}}">

        //CONTENTS//

        </tr>
        {{/FOREACH}}
   </tbody>
</table>

$(document).ready(function() {
$(".btn").click(function(e){
    e.preventDefault();
    var tar = $('.hideable'+$(this).attr('attrib_target'));
    tar.slideToggle('slow');
    // tar.toggle();
});
});

我应该在哪里打开和关闭div才能有功能？

编辑：基本上我需要的是：

表标题（已修复）

包含基本信息的表行（已修复）

表格行隐藏了更多信息（可切换）

我遇到的问题是循环，因为我需要将隐藏的表行包装在div和表中（否则，div因为属性而刚刚从表中弹出）。循环一直在弄乱我不同的尝试，正确地做到能够为隐藏的部分设置动画。

感谢。

Answer 1

如果设置的高度小于内容的实际高度，则表元素的任何部分（<tr>或<tbody>都不会隐藏溢出的内容。这就是动画不能使用表格元素的原因。我建议将您的内容包装在<div>内并使用slideToggle进行动画制作。

请检查以下代码：

＆＃13;

$(document).ready(function() {
  $(".btn").click(function(e) {
    e.preventDefault();
    var tar = $('.hideable' + $(this).attr('data-target'));
    tar.slideToggle('slow');
    // tar.toggle();
  });
});

＆＃13;

.hidden {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        // HEAD OF TABLE //
      </th>
    </tr>
  </thead>
  <tbody>
  <!-- {{FOREACH}} -->
  <!-- FOREACH ITERATION 1 -->
    <tr>
      <td>
        // ALWAYS VISIBLE TR //
        <button type="button" class="btn" data-target="1">Show</button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="hidden hideable1">
        //CONTENTS//
        </div>
      </td>
    </tr>
  <!-- END: FOREACH ITERATION 1 -->
  <!-- FOREACH ITERATION 2 -->
    <tr>
      <td>
        // ALWAYS VISIBLE TR //
        <button type="button" class="btn" data-target="2">Show</button>
      </td>
    </tr>
    <tr class="">
      <td>
        <div class="hidden hideable2">
        //CONTENTS//
        </div>
      </td>
    </tr>
  <!-- END: FOREACH ITERATION 2 -->
  <!-- {{/FOREACH}} -->
  </tbody>
</table>

＆＃13;

动态表中的下拉问题。 html / php

1 个答案: