gpt4 book ai didi

html - 包含隐藏的 "prepended"li 元素的列表

转载 作者:太空宇宙 更新时间:2023-11-04 03:35:35 25 4
gpt4 key购买 nike

我正在尝试制作列表(“ul”),稍后我使用 jquery 添加值,使用 .prepend() 函数。我想隐藏所有这些新值,就像在 div 中一样,稍后我将显示它们,但随后我添加它们,它们必须被隐藏。有没有办法做这样的事情? enter image description here

我做了一张图片来展示我的问题,所以我想做的是,id 就像我用 JQuery 添加 5 和 6 li 元素,它们必须在那个“隐藏区域”中,并且在“可见区域”中列出不会改变.到目前为止,我制作了该列表,但后来我添加了新元素,它进入可见区域,可见区域上的 li 元素顺序如下:“6、5、1、2”。

编辑。

我厌倦了用 @mboldt 解决我的问题建议,但它对我没有用,或者我做错了什么。我的代码:

    <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.item-list-inner {
float:left;
width: 600px;
overflow: hidden;

border:2px solid black;
}

.item-list-ul {
position:relative;
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px;
height:100px;
}

.item-list-ul li {
display: inline-block;
*display: inline; /*IE7*/
*zoom: 1; /*IE7*/
float: left;
}

.item{
width:80px;
height:80px;
border:1px solid red;
margin:7px;

}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="item-list-inner">
<ul class="item-list-ul">
<li>
<div class="item">1</div>
</li>
<li>
<div class="item">2</div>
</li>
<li>
<div class="item">3</div>
</li>
<li>
<div class="item">4</div>
</li>
<li>
<div class="item">5</div>
</li>
<li>
<div class="item">6</div>
</li>
</ul>

</div>
</div>
</body>
</html>

但是当我尝试使用 jquery 为新元素添加前缀时:

$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")

新的 li 元素从列表中进入,而不是在那个“隐藏”的地方:第一行是我想要得到的结果,就像新元素进入那个不可见的(隐藏区域)并且在我旋转列表之前不会显示。第二行是我现在用我的代码得到的结果。如您所见,我在列表前面但在可见区域中添加了新的 li 元素,并移动了其他 li 元素。

enter image description here

最佳答案

您可以将它们添加到 class ".addClass( 'hidden' )"和 css 文件中 ".hidden{display:none;}

稍后你只需要“.removeClass('hidden')”来显示它们。

关于html - 包含隐藏的 "prepended"li 元素的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25620643/

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