当我点击带有 moree 类的 div 时，我想附加 5 个 li 元素。
它工作正常，但是当我点击更多时，我想在列表的末尾添加这些按钮。现在元素处于乞讨状态。
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>谢谢。
最佳答案
你是这个意思吗？它仅通过向下滑动动画略微改进了您的示例。
$(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;
}
});
});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>
</ol>
<div class="moree">Add 5</div>
</div>
</body>
</html>关于javascript - 如何多次附加元素(向下滑动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39815181/