单击跨度时，Jquery 展开折叠表格的下一行答案

【问题标题】：Jquery expand collapse next row of the table on click of span单击跨度时，Jquery 展开折叠表格的下一行
【发布时间】：2018-04-18 07:49:06
【问题描述】：

我有一个表格，其中包含用于展开和折叠的 + 和 - 项目。单击该特定行旁边的此图标行应展开。我正在通过 jquery 动态添加可折叠图标。如何在点击这些图标时动态访问下一行。

理想情况下，点击展开行的 - 图标应该隐藏，点击 + 应该显示它。提前致谢

$( document ).ready(function() {
    $(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>');
});

.table tbody tr.has-history > td:first-child {
  position: relative;
}
.table tbody tr.has-history span.collapse-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: -20px;
  background: #f09d18;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  font-size: 1.5em;
  line-height: 1em;
}
.table tbody tr.has-history span.collapse-icon:before {
  content: "+";
}
.table tbody tr.has-history.open span.collapse-icon {
  background: #eee;
  color: #000;
  border: 1px solid #ccc;
}
.table tbody tr.has-history.open span.collapse-icon:before {
  content: "-";
}
.table{
MARGIN-LEFT:40px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Config</th>
            <th>Version</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="has-history open">
            <td><a href="#">MSM8992</a></td>
            <td>Estel</td>
            <td>2</td>
            <td>Active</td>
        </tr>
         <tr class="expanded">
            <td colspan="4">
                <table class="table" >
                    <thead>
                        <tr>
                          <th>Product</th>
                          <th>Config</th>
                          <th>Version</th>
                          <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                           <td><a href="#">MSM8994</a></td>
                          <td>Elessar</td>
                          <td>1</td>
                          <td>Active</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td><a href="#">MSM8994</a></td>
            <td>Elessar</td>
            <td>1</td>
            <td>Active</td>
        </tr>
        <tr>
            <td><a href="#">APQ8084</a></td>
            <td>Gandalf - PoP Memory</td>
            <td>1</td>
            <td>Active</td>
        </tr>
        <tr class="has-history">
            <td><a href="#">MDM9x40</a></td>
            <td>Tesla</td>
            <td>3</td>
            <td>Active</td>
        </tr>
        <tr>
            <td><a href="#">MDM9x45</a></td>
            <td>Spark</td>
            <td>1</td>
            <td>Active</td>
        </tr>
        <tr class="has-history">
            <td><a href="#">APQ8084</a></td>
            <td>Gandalf - External Memory</td>
            <td>1</td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在折叠图标类上绑定点击事件

点击后切换下一行和图标

$(document).on("click", ".collapse-icon", function() {
$(this).parents(".has-history").next().slideToggle();
$(this).parents(".has-history").toggleClass("open");
});

参考这个 JSFiddle https://jsfiddle.net/k6kn972b/

【讨论】：

【解决方案2】：

使用事件委托绑定点击事件

然后使用$(this).closest("tr")定位当前行

然后使用.next()获取下一行

 $(document).on("click", ".collapse-icon", function() {
   $(this).closest("tr").next().slideToggle();
 });

【讨论】：