SlideDown(）不会'不能在jQuery中使用After(）

SlideDown() doesn't work with After() in jQuery

本文关键字：jQuery After 不会 SlideDown 不能      更新时间：2023-09-26

我想向列表中添加一个元素，并且希望添加时它向下滑动。但是使用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/

首先，您需要关闭那些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");
});

添加一个元素而不显示它，在下一步中，slideDown将使它出现。

试试这个：

Js文件：http://jsfiddle.net/sw9yLdt7/

<ul id="myUL">
  <li> First Item </li>
   <li> Second Item </li>
   <li> Third Item </li>
   <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>

USe this jquery：

$('#add').click(function(e){
    e.preventDefault();     
    $('<li> A New Item </li>').appendTo('#myUL').hide().slideDown();
});

演示

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>
$('#add').click(function(e) {
  e.preventDefault();
  $('#myUL').append('<li> A New Item </li>');
});

问题是您的HTML没有正确关闭-关闭它们并使用append

相关文章：