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

您无法为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>

Answer 2

好吧，因为您从不关闭它；）

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

$("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/

这也消除了进行检查以查看所单击项目是否与上一个项目相同的需要，因此可以删除return false。

slideToggle和click事件不适用于新元素

2 个答案: