JQuery手风琴

时间:2014-04-18 11:58:20

标签: javascript jquery html jquery-ui jquery-ui-accordion

这应该是适合您的任何一个。我想要一个包含扩展行的表。我正在尝试在class =" Accordion1"上实现JQuery手风琴。 它根本不起作用。 我做错了什么?

...
<script>
$(function() {
$( "th.Accordion1").accordion();
});
</script>
</head>

<body>
<table>
<tbody>

    <tr>
        <th colspan="2" class="Accordion1">GROUP 1</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Note</th>
    </tr>
    <tr>
        <td>1</td>
        <td>-</td>
    </tr>
    <tr>
        <td>2</td>
        <td>-</td>
    </tr>
    <tr>
        <td>3</td>
        <td>-</td>
    </tr>

    <tr>
        <th colspan="2" class="Accordion1">GROUP 2</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Note</th>
    </tr>
    <tr>
        <td>1</td>

        <td>-</td>
    </tr>
    <tr>
        <td>2</td>
        <td>-</td>
    </tr>

</tbody>
</table>

谢谢!

1 个答案:

答案 0 :(得分:0)

我相信你想使用jQuery Accordion的标题选项。

$(function () {
    $('table').accordion({header: '.accordion1' });
});

http://api.jqueryui.com/accordion/#option-header