gpt4 book ai didi

javascript - 如何多次附加元素(向下滑动)

转载 作者:行者123 更新时间:2023-11-28 05:20:09 25 4
gpt4 key购买 nike

当我点击带有 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com