Question

点击div li时，我想添加5 moree个元素。它工作正常，但当我点击更多时，我想在列表的末尾添加这些按钮。现在这些物品正在乞讨。 Furturmore有没有办法追加效果下滑？这是我的片段：

$(document).ready(function () {
   for (var i = 0; i < 5; i++) {
        $(".moree").click(function () {
             $(this).closest('.content').append('<ol ><li>Title 2</li></ol>');
        });
   }  

});

ol > li { 
   list-style:none; 
   padding-top:10px; 
   border:1px solid green;
   margin-top:10px;
}
.moree { 
   width:30px; 
   background:yellow;
}

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="content">
    <ol>
    <li>title</li>
     <div class="moree">Add 5</div>
    </ol>
    </div>
</body>
</html>

感谢。

Answer 1

你是说这个意思吗？它只是略微改进了你的滑动动画示例。

＆＃13;

$(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i++) {              
      $(this)
        .prev()
        .append('<li style="display:none">Title 2</li>')
        .children()
        .last()
        .hide()
        .delay(delay)
        .slideDown(400);
      delay += 400;
    }
  });
});

＆＃13;

ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}

＆＃13;

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
    </div>
</body>
</html>

＆＃13;

Answer 2

首先，你应该移动＆＃34;更多＆＃34;有序列表之外的类。

<html>
<head>
</head>
<body>
 <div class="content">
  <ol>
   <li>title</li>
  </ol>
  <div class="moree">Add 5</div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

之后，在jquery中，将click循环移动到click函数内。

要实现滑动效果，首先我们必须隐藏我们必须附加的元素，然后我们使用＆＃34; appendTo（）＆＃34;函数附加到父元素然后我们可以使用＆＃34; show（）＆＃34;用于滑动附加列表的功能。

$(document).ready(function () {
        $('.moree').on('click', function(){
            for(var i=0; i<5; i++){
                $('<li>Title 2</li>').hide().appendTo('ol').show("slow");
            }
        });
    });

Answer 3

您没有添加5个列表项，而是向同一元素添加了5次单击事件侦听器。

这可能是你想要的：

$(document).ready(function() {
  $(".moree").on('click', function() {
    for (var i = 0; i < 5; i++) {
      $(this).closest('.content').find('ol').append('<li class="no-height">Title ' + i + '</li>');
    }
    window.setTimeout(function() { $('li.no-height').removeClass('no-height'); }, 5);
  });
})

ol > li {
  list-style: none;
  padding-top: 10px;
  border: 1px solid green;
  margin-top: 10px;
  height: 40px;
  overflow: hidden;
  transition: all 0.4s ease;
}
ol > li.no-height {
  height: 0;
  padding: 0;
  border: 0;
}
.moree {
  width: 30px;
  background: yellow;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <div class="content">
    <ol>
      <li>title</li>
    </ol>
    <div class="moree">Add 5</div>
  </div>

Answer 4

你好试试这个JQuery代码希望它可以帮到你

       $(document).ready(function () {
       for (var i = 0; i < 5; i++) {
        $(".moree").click(function () {
            $(this).closest('.content').prepend('<ol ><li>Title 2</li>   
        </ol>');
        });
         }  

         })

尝试下面的小提琴 DemoFiddle 希望它有所帮助

如何多次追加元素（下滑）

4 个答案: