jquery:创建自定义的可折叠函数

Question

我正在尝试创建默认情况下未折叠但作为"onclick“属性可以折叠的<caption>标记。我还想让膨胀/塌陷稍微有生气--我希望它们在膨胀时“展开”或垂直向下过渡，在塌陷时垂直向上过渡。

目前我正在使用：

jQuery(document).ready(function(){
     $('.cv .collapsable').click(function() {
         $(this).next().toggle('slow');
         return false;
     }).next().hide();
});

但是，这会使折叠的<caption>中的内容呈现而不是父元素的展开。我非常希望在显示元素的内容之前看到父元素向下扩展(或者，当元素展开时，元素的内容也会变得可见)。无论是哪种方式，问题都在于扩展是瞬时的，有点不和谐，而一旦扩展，内容就会慢慢地消失。

此外，该函数默认为折叠状态，而不是扩展状态，我需要它进行逆操作。基本上，我希望人们能够折叠这个来保存屏幕房地产，如果需要的话，但是在其他情况下，每个caption标记之间的所有内容都有一个正常和完整的显示。我确信这是非常简单的，我是完整的jquery核心。

Answer 1

这是一份经修订的答复，所依据的是问题中添加的补充资料，以及对本答复所作评论所澄清的内容。

首先，您的项目已经开始可见，只是您正在用.next.hide()代码立即将它们隐藏起来。

您所描述的动画与您正在使用的动画不匹配。切换只是通过缓慢地改变元素的不透明度直到它消失，从而直接隐藏/显示动画。然而，你所描述的是一张幻灯片。现在来看一下jQuery的slideToggle功能。

此外，表不会优雅地隐藏，而且您无法在所有浏览器中很优雅地将表中的一项隐藏起来。因此，我建议对列标题使用span标记。将表包装在div中(以便它们能够正确地动画)，然后将所有表包装在另一个div中，如下所示：

<div id="table1">
  <span class='collapsable'>Title 1</span>
  <div>
    <table>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td>Item 2</td>
        </tr>
        <tr>
          <td>Item 1</td>
          <td>Item 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div id="table2">
  <span class='collapsable'>Title 2</span >
  <div>
    <table>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td>Item 2</td>
        </tr>
        <tr>
          <td>Item 1</td>
           <td>Item 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在javascript上，非常简单，只需将切换更改为toggleSlide，并更新选择器，删除初始隐藏，然后查看！

jQuery(document).ready(function() {
    $('span.collapsable').click(function() {
        $(this).next().slideToggle("slow");
        return false;
    });
});

这是一个工作的小提琴

-

-

这是最初的答案，留在这里，以防有人偶然发现这个问题，我最初以为你会遇到这样的问题：

首先，HTML是无效的。在一个表中有多个头是无效的。头的目的是作为列的标题。因此，它不可能像个孩子一样活着。看看表的w3c标准：http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3

对于您想要完成的任务，您需要使用多个表。看来你是想用头作为标题。为此，您应该使用<caption>。

而且，您实际上没有使用jquery(至少在这段代码中没有使用)，因此没有理由将jquery全部包含在小提琴中。(如果您正在使用它，您可能需要考虑在部分中添加对Google的CDN托管css文件的引用)。

尽管如此，我认为这把小提琴是你的目标：http://jsfiddle.net/fordlover49/VbqaX/