Jquery在点击跨度时展开折叠表的下一行

Question

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

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

＆＃13;

＆＃13;

void func (int const &param);

＆＃13;

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

＆＃13;

.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;

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用事件委派

绑定点击事件

然后使用$(this).closest("tr")

定位当前行

然后使用.next()

获取下一行

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

Answer 2

在折叠图标类

上绑定点击事件

点击

切换下一行和图标

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

请参阅此JSFiddle https://jsfiddle.net/k6kn972b/