0

基本的には非表示と表示だけのトグルスライドがあり、本来のように上下にスライドしません。

<script type="text/javascript">
    $(document).ready(function(event){
        $('.togglable tr:not(:first-child)').hide();

        $('a.toggleSwitch').click(function (event) {
            event.preventDefault();
            $(this).parent().parent().siblings('tr').slideToggle("fast");
        });
    });
</script>

そしてhtml...

<table class="togglable">
    <tr><td><a class="toggleSwitch" href="#">Click me</a></td></tr>
    <tr><th>Part No</th><th>Description</th></tr>
    <tr><td>12345</td><td>Description1</td></tr>
    <tr><td>12344</td><td>Description2</td></tr>
    <tr><td>12343</td><td>Description3</td></tr>
    <tr><td>12342</td><td>Description4</td></tr>
</table>

jquery に慣れてきたばかりなので、どんな助けでも大歓迎です!

4

1 に答える 1

0

これを試してください（フィドル）

<a class="toggleSwitch" href="#">Click me</a>
    <div class="togglable">
        <table>
            <tr>
                <th>
                    Part No
                </th>
                <th>
                    Description
                </th>
            </tr>
            <tr>
                <td>
                    12345
                </td>
                <td>
                    Description1
                </td>
            </tr>
            <tr>
                <td>
                    12344
                </td>
                <td>
                    Description2
                </td>
            </tr>
            <tr>
                <td>
                    12343
                </td>
                <td>
                    Description3
                </td>
            </tr>
            <tr>
                <td>
                    12342
                </td>
                <td>
                    Description4
                </td>
            </tr>
        </table>
    </div>
    <script>
        $(document).ready(function (event) {
            $('.togglable').hide();

            $('a.toggleSwitch').click(function (event) {
                event.preventDefault();
                $('.togglable').slideToggle("slow");
            });
        });
    </script>

実際、スライドしようとしているマークアップには、スライドしたときに見栄えを良くするのに十分な垂直方向のスペースがありません。

于 2013-02-21T12:42:31.237 に答える