событие slideToggle and click не работает с новым элементом - PullRequest
Новая
       7

событие slideToggle and click не работает с новым элементом

0 голосов
/ 02 сентября 2018

Почему он не закрывает строку таблицы, когда я нажимаю второй раз? 

$("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();
});

спасибо

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Ну, потому что вы никогда не закрываете его;)

Когда вы нажимаете на тот же элемент, элемент удаляется следующим образом: 

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

Это также устраняет необходимость выполнять проверку, чтобы увидеть, совпадает ли выбранный элемент с последним, поэтому возвращаемое значение false можно отбросить.

0 голосов
/ 02 сентября 2018

Вы не можете анимировать 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>
...