Question

我正在创建包含网站表格的侧边栏。

我想：

首先只显示五行
点击侧边栏底部的链接，将显示15行，链接文字将会更改。
当div完全打开时再次单击链接，侧栏仅再次显示前五个，并且链接文本再次更改回第一个。

所以我正在寻找某种切换div函数来为我做这个，但我希望div的一部分始终可见。

以下是我的侧边栏的屏幕截图：http://cl.ly/image/390J2u2z1W1Z

有没有人能很好地解决我的问题？

Answer 1

这完全取决于您的内容是什么，但最简单的方法是更改div高度以符合您的要求或使用两个div s（一个用于“缩短”版本，另一个用于“完整” “并相应地显示/隐藏它们。

Answer 2

将您的主<div>分隔为多个较小的<div> ...然后隐藏整个内部<div>。使用jQuery的.toggle或.hide / .show函数。

Answer 3

将类添加到您不想先显示的行

<tr class="toggle"> ..... </tr>

CSS：

tr.toggle { display: none; }

补充工具栏链接：

<a href="#" id="toggle">Toggle</a>

然后使用jQuery toggle（）来打开和关闭

<script>
  $(function(){
     $('a#toggle').click(function(e)
     {
         e.preventDefault();
         $('tr.toggle').toggle();
     });

  });
 </script>

Answer 4

只需查看此demo

即可

<强> JS：

$('.js_toggle').on('click', function(event) {
    $('table').toggleClass('full-table');

    event.preventDefault();
});

<强> HTML：

<table>
    <tr>
        <td>tr01</td>
        <td>tr02</td>
    </tr>
    …
    <tr>
        <td>tr01</td>
        <td>tr02</td>
    </tr>
</table>

<a href="#" class="js_toggle">toggle_table</a>

<强> CSS：

table tr:nth-child(n+6) {
    display: none;
}

table.full-table tr {
    display: block;
}

我可以显示/隐藏部分div吗？

4 个答案: