0

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

我想：

  • 一开始只显示五行
  • 通过单击侧边栏底部的链接，将显示 15 行，并且链接文本将更改。
  • 通过在 div 完全打开时再次单击链接，侧边栏仅再次显示前五个，并且链接文本再次变回第一个。

所以我正在寻找某种切换 div 功能来为我执行此操作，但我希望 div 的一部分始终可见。

这是我的侧边栏截图：http://cl.ly/image/390J2u2z1W1Z

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

4

4 回答 4

5

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

于 2012-11-26T14:13:15.247 回答
1

只需查看此演示

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;
}
​

​</p>

于 2012-11-26T14:26:03.240 回答
1

向您不想首先显示的行添加一个类

<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>
于 2012-11-26T14:15:02.010 回答
1

将您的 main<div>分成多个较小<div>的 s ......然后隐藏整个 internal <div>s。使用 jQuery.toggle或.hide/.show函数。

于 2012-11-26T14:13:04.950 回答