0

Web サイトのテーブルを含むサイドバーを作成しています。

をお願いします：

  • 最初に表示するのは 5 行のみ
  • サイドバーの下部にあるリンクをクリックすると、15 行が表示され、リンク テキストが変更されます。
  • div が完全に開いているときにリンクをもう一度クリックすると、サイドバーには最初の 5 つだけが再び表示され、リンク テキストは最初のテキストに戻ります。

だから私はこれを行うためのトグルdiv関数を探していますが、divの一部を常に表示したいです。

これが私のサイドバーのスクリーンショットです: http://cl.ly/image/390J2u2z1W1Z

私の問題に対する良い解決策を持っている人はいますか?

4

4 に答える 4

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 に答える