我正在为折叠面板编写jquery。预期的行为不正确。
当前行为：当我单击任意行时，它会扩大但不会塌陷。
预期的行为：当我单击另一行时，应该展开，而当我单击另一行时，应该打开另一行，否则应该折叠。 下面是代码：
**HTML**
<table id="paddin-sm" class=" fold-table container table table-striped table-hover table-fw-widget dataTable no-footer">
<thead>
<tr>
<th>ID <span class="01"> </span></th>
<th>Name <span class="img-down-sy"> </span></th>
<th>Created By <span class="img-down-sy"> </span></th>
<th>Created Date <span class="img-down-sy"> </span></th>
<th>Type <span class="img-down-sy"> </span></th>
<th>Status <span class="img-down-sy"> </span></th>
<th>Actions </th>
<th>-</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td>PID0006</td>
<td class="pcs">Robo Motors</td>
<td class="cur">Jordan Smith</td>
<td>20/27/2017</td>
<td class="per">SDLC</td>
<td class="per padding-left-27px"><span class="indicator-inprogress"></span>Open</td>
<td class="per ">
<div class="tools dropdown padding-left-15px">
<a class="dropdown-toggle" href="#" role="button"
data-toggle="dropdown"><span
class="mdi mdi-more font-weight-b them-txt-color"></span></a>
<div class="posi-left dropdown-menu dropdown-menu-right position-ee" role="menu"><a class="dropdown-item"
href="#">Edit</a><a class="dropdown-item" href="#">Breakdown</a><a
class="dropdown-item" href="#">Estimate</a>
<a class="dropdown-item" href="#">Add Actuals</a>
</div>
</div>
</td>
<td><span class="chever-down mdi mdi-chevron-down"></span></td>
</tr>
<tr class="fold">
<td colspan="10">
<div class="fold-content">
<h3>Company Name</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.</p>
</div>
</td>
</tr>
<tr class="view">
<td>PID0005</td>
<td class="pcs">Robo Motors</td>
<td class="cur">Jordan Smith</td>
<td>20/27/2017</td>
<td class="per">SDLC</td>
<td class="per padding-left-27px"><span class="indicator-done"></span>Close</td>
<td class="per">
<div class="tools dropdown padding-left-15px"><a class="dropdown-toggle" href="#" role="button"
data-toggle="dropdown"><span
class="mdi mdi-more font-weight-b them-txt-color"></span></a>
<div class="posi-left dropdown-menu dropdown-menu-right" role="menu"><a class="dropdown-item"
href="#">Edit</a><a class="dropdown-item" href="#">Breakdown</a><a
class="dropdown-item" href="#">Estimate</a>
<a class="dropdown-item" href="#">Add Actuals</a>
</div>
</div>
</td>
<td><span class="chever-down mdi mdi-chevron-down"></span></td>
</tr>
<tr class="fold">
<td colspan="10">
<div class="fold-content">
<h3>Company Name</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas.</p>
</div>
</td>
</tr>
</tbody>
</table>
JQuery
$(".fold-table").find(".chever-down").on("click", function() {
var isSameTrOpen = false;
isSameTrOpen = $(this).closest("tr").next().hasClass('open');
if (($("#paddin-sm").find(".open").length > 0) && !isSameTrOpen) {
$("#paddin-sm").find(".open").removeClass("open").addClass("fold");
$(this).closest("tr").next().hasClass('open').removeClass("mdi-chevron-up").addClass("mdi-chevron-down");
$("#paddin-sm").find(".view").removeClass("table-row-clr");
} else {
$(this).closest("tr").find(".view").addClass("table-row-clr");
}
if ($(this).hasClass("mdi-chevron-down")) {
$(this).removeClass("mdi-chevron-down").addClass("mdi-chevron-up");
$(this).closest("tr").addClass("table-row-clr");
} else {
$(this).removeClass("mdi-chevron-up").addClass("mdi-chevron-down ");
$(this).closest("tr").removeClass("table-row-clr");
}
$(this).closest("tr").next("tr").toggleClass("open ").next(".fold").toggleClass("open");
})