slideToggle和click事件对新元素不起作用

Question

当我第二次点击时为什么不关闭表格行？

$("tr").on('click', function() {
  $("table").find(".new-element").remove();
  let el = $(this);
  var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
    "<li><label>item1: </label><span>content1</span></li>" +
    "<li><label>item2: </label><span>content2</span></li>" +
    "</ul></div></td></tr>";
  $(el).after(new_elements);
  $(el).next().slideToggle("slow"); // means of new_elements
});

table {
  border-collapse: collapse;
}

ul {
  list-style: none;
  text-align: center;
}

.display-none {
  display: none;
}

<table border="1">
  <thead>
    <tr>
      <th>name</th>
      <th>family</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>sum</td>
      <td>oven</td>
    </tr>
    <tr>
      <td>jak</td>
      <td>oven</td>
    </tr>
  </tbody>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/11012345/1jvt69qh/#&togetherjs=e0AefgthCx

我甚至尝试了下面的代码，但它不起作用。

$("tr.new_elements").click(function(){
  $(this).slideDown();
});

谢谢

Answer 1

好吧，因为你永远不会关闭它;）

单击同一项目时，该项目将被删除：

$("table").find(".new-element").remove();

然后回过头来说：

let el = $(this);
var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
"<li><label>item1: </label><span>content1</span></li>" +
"<li><label>item2: </label><span>content2</span></li>" +
"</ul></div></td></tr>";
$(el).after(new_elements);
$(el).next().slideToggle("slow"); 

您需要做的是在删除并重新创建它之前检查“this”和“that”是否相同。好吧，至少在快速关闭切换之前就是这种情况。

在切换工作之前。

var active = $("table").find(".new-element");
var el = $(this);
if ($(el).next("tr").hasClass("new-element")) {
   $(active).remove();
   return false;
} else {
   $(active).remove();
}

切换激活时：

$("table").find(".new-element").remove();
var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
"<li><label>item1: </label><span>content1</span></li>" +
"<li><label>item2: </label><span>content2</span></li>" +
"</ul></div></td></tr>"; 
$(this).after(new_elements);
$(this).next().show();
$('.new-element').find("div").slideToggle('slow');

这是一个非常快速的结束切换：

https://jsfiddle.net/e54hu3rL/52/

这也消除了检查点击项是否与last相同的需要，因此可以删除return false。

Answer 2

你无法为tr制作动画......可悲的是，这是一个无法动画的元素。

但你可以动画内部div。见下文：

$("tr").on('click', function () {
  $("table").find(".new-element").remove();
  let el = $(this);
  var new_elements = "<tr class='new-element'><td colspan='2'><div class=' display-none'><ul>"
      + "<li><label>item1: </label><span>content1</span></li>"
      + "<li><label>item2: </label><span>content2</span></li>"
      + "</ul></div></td></tr>";
  el.after(new_elements);
  el.next().find("div").slideToggle("slow");     // means of new_elements
});

table {
  border-collapse: collapse;
}
ul{
  list-style: none;
  text-align: center;
}
.display-none{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <thead>
  <tr>
    <th>name</th>
    <th>family</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>sum</td>
    <td>oven</td>
  </tr>
  <tr>
    <td>jak</td>
    <td>oven</td>
  </tr>
  </tbody>
</table>