javascript - SlideDown() 不能与 jQuery 中的 After() 一起使用

Question

我想将一个元素添加到列表中，并且希望它在添加时向下滑动。但是使用 after() 方法它不起作用。为什么？

HTML代码:

<ul id="myUL">
 <li> First Item <li>
 <li> Second Item <li>
 <li> Third Item <li>
 <li> Fourth Item <li>

添加

Js代码:

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li> A New Item </li>').slideDown("slow");
});

Fiddle完整代码:http://jsfiddle.net/gxs46L0u/

Answer 1

首先，您需要关闭这些 li 标记。 HTML:

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>

对于 js 来说，这里有一个快速但肮脏的方法:

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li style="display:none"> A New Item </li>');
  $('li:last').slideDown("slow");
});

您添加一个元素而不显示它，在下一步中，向下滑动将使其显示。