Question

我正在尝试制作列表（“ul”），之后我用jquery添加值，使用 .prepend（）函数。我想把所有这些新值隐藏起来，就像div一样，后来我会展示它们但是我添加它们，它们必须被隐藏起来。有没有办法做那样的事情？ enter image description here

我做了一张照片来展示我的问题，所以我想做什么，就像我用JQuery添加5和6 li元素一样，他们必须在“隐藏区域”，并且“可见区域”中的列表不会改变。到目前为止，我已经制作了这个列表，但随后我添加了新元素，它在可见区域中，并且可见区域上的li元素顺序如下：“6,5,1,2”。

EDIT。

我厌倦了用@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

Answer 1

你可以添加他们的课程＆＃34; .addClass（＆＃39; hidden＆＃39;）＆＃34;并在css文件＆＃34; .hidden {display：none;}

稍后您只需要＆＃34; .removeClass（＆＃39;隐藏＆＃39;）＆＃34;向他们展示。

Answer 2

如果在将列表项添加到列表之前创建列表项，则可以通过jQuery方法隐藏它，如下所示

var item = $("<li>hidden item</li>");
$(item).hide();
$("#list").prepend(item);

查看此jsfiddle，它只显示3个列表项，但如果您使用firebug查看源代码，则会看到另一个隐藏的列表项已添加。

但是如果你试图实现像滑块这样的东西，那么overflow-property可能就是你要找的东西（很难说明给出的信息）。

修改既然你已经更新了你的问题，我想我现在知道你要做什么了，我用另一个解决方案创建了一个新的jsfiddle。检查一下，看看这是否是你想要做的，以及代码是否对你有帮助。在jsfiddle中有两个按钮，一个用于向右滚动列表，另一个用于将项目添加到＆＃34;不可见区域＆＃34;在列表的左侧。注意：这不是很干净，即滚动时仍有边框显示，实际上应该隐藏但我认为这足以表明这个想法。

列表隐藏＆＃34;前置＆＃34;李元素

2 个答案: