我正在处理我的项目，似乎jQuery Accordion没有显示在数据表的第二页中。这是我的代码：
Jquery的：
$(document).ready(function() {
$('#myTable').DataTable( {
"pageLength": 5
} );
for (var x = 1; x <= 10 ; x++) {
$('#accordion_' + x).find('.accordiontoggle-' + x).click(function () {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordioncontent-" + x).not($(this).next()).slideUp('fast');
});
}
} );
HTML：
<table id="myTable">
<thead>
<tr>
<th>PO#</th>
<th>Vendor Name</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sample1</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_1" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-1">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>2</td>
<td>Sample2</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_2" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-2">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>3</td>
<td>Sample3</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_3" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-3">2 more</a>
<div class="accordion-content default accordioncontent-3">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>4</td>
<td>Sample4</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_4" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-4">2 more</a>
<div class="accordion-content default accordioncontent-4">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>5</td>
<td>Sample5</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_5" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-5">2 more</a>
<div class="accordion-content default accordioncontent-5">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>6</td>
<td>Sample6</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_6" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-6">2 more</a>
<div class="accordion-content default accordioncontent-6">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>7</td>
<td>Sample7</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_7" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-7">2 more</a>
<div class="accordion-content default accordioncontent-7">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>8</td>
<td>Sample8</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_8" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-8">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>9</td>
<td>Sample9</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_9" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-9">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>10</td>
<td>Sample10<td>
<td>January 1, 1990</td>
<td>
<div id="accordion_10" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-10">2 more</a>
<div class="accordion-content default accordioncontent-10">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
</tbody>
</table>
我还为每个Div指出了一个唯一ID名称，并为其指定了类名。
这是我的jsfiddle的链接：https://jsfiddle.net/k3vin023/73phfh66/
答案 0 :(得分：3)
试一试：
<强>使用Javascript：
function showNext($this) {
$this.next().slideToggle('fast');
}
$(document).ready(function () {
$('#myTable').DataTable({
"pageLength": 5
});
});
<强> HTML：
<table id="myTable">
<thead>
<tr>
<th>PO#</th>
<th>Vendor Name</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sample1</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_1" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-1" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>2</td>
<td>Sample2</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_2" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-2" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>3</td>
<td>Sample3</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_3" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-3" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-3">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>4</td>
<td>Sample4</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_4" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-4" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-4">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>5</td>
<td>Sample5</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_5" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-5" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-5">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>6</td>
<td>Sample6</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_6" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-6" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-6">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>7</td>
<td>Sample7</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_7" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-7" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-7">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>8</td>
<td>Sample8</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_8" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-8" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>9</td>
<td>Sample9</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_9" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-9" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
<tr>
<td>10</td>
<td>Sample10</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_10" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-10" onclick="showNext($(this))">2 more</a>
<div class="accordion-content default accordioncontent-10">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>
</tbody>
</table>
<强>的jsfiddle：
答案 1 :(得分：0)
当你谈到＆＃34; JQuery手风琴＆＃34;我假设您指的是JQuery UI Accordion小部件。如果是这样，您无法正确设置。
我无法改进其here页面上的示例。这是基本结构：
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
请注意，每个手风琴标头必须是h3元素，并且内容必须紧跟在标题之后的div元素中。您的标记中没有h3个元素。
如果您将正确的结构放入表中，那么您需要做的就是在每个元素上调用accordion()方法。我将向您介绍文档以获取详细信息。
答案 2 :(得分：0)
在上一个<tr>中，<tr>标记出现了问题。将上一个<tr>....</tr>替换为
编辑注意：它的工作原理..
<tr>
<td>10</td>
<td>Sample10</td>
<td>January 1, 1990</td>
<td>
<div id="accordion_10" class="accordion">
<span>Item +</span> <a class="accordion-toggle accordiontoggle-9">2 more</a>
<div class="accordion-content default accordioncontent-1">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</div>
</div>
</td>
<td>1.00</td>
<td>Open</td>
</tr>