这对你来说应该是很简单的。我想要一个表,其中的行可以展开。我正在尝试在class="Accordion1“上实现JQuery accordion。它根本不起作用。我做错了什么?
...
<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>谢谢!
发布于 2014-04-18 20:11:43
我相信你想要使用jQuery Accordion的标题选项。
$(function () {
$('table').accordion({header: '.accordion1' });
});http://api.jqueryui.com/accordion/#option-header
发布于 2017-08-11 22:05:49
我意识到这篇文章很老了,但我有两种不同的解决方案来解决这个问题,我想不管怎样,还是把它们贴出来吧,也许有人会对此心存感激。
你可以在我的Pen上找到两个选项。
包括“组1”和“组2”的一个...
<div class="options" id="op1">
<div class="accordion">
<h3>GROUP 1</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3>GROUP 2</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>还有一个没有
<div class="options" id="op2">
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>请注意,要使其正常工作,您必须包含jquery和jquery-ui!
我为折叠面板和CSS添加的选项是可选的……;)
https://stackoverflow.com/questions/23153655
复制相似问题