Question

在jquery中，我需要动态显示前两个值，然后在显示单击剩余值时？

 <div class="category_items">
    <div class="category_item">
        <div class="test">test1_1</div>
        <div class="test">test1_2</div>
        <div class="test">test1_3</div>
        <div class="test">test1_4</div>
        <div class="test">test1_5</div>
        <div class="test">test1_6</div>
</div>
<button>Show / Hide</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script>
    var elems = $('.category_item', '.category_items').filter(function() {
                return $(this).children().length > 2;
            }).hide();

$('button').on('click', function() {
    elems.toggle();
});
</script>

我想在我点击想要显示完整列表的按钮

时默认显示前两项

Answer 1

使用带

的css执行此操作

HTML

<style>
 li div{display:none;}
 li:hover div {display:block;position:absolute;left:200px;width:100px;height:100px;background-color:red;}
</style>

<ul>
<li>123<div>1</div></li>
<li>222<div>2</div></li>
<li>333<div>3</div></li>
</ul>
enter code here

Answer 2

:gt selector对这种情况有好处。我希望，这段代码可以帮助你。

<script>
    $('.category_item .test:gt(1)').hide();
    $('button').on('click', function() {
       $('.category_item .test:gt(1)').toggle();
    });
</script>

如果您想更改要显示的元素数量，只需更改gt（）选择器中的数字。

Answer 3

还能看到这一点，但是我不确定是否正常使用span作为ul不是li的孩子但是你可以把最后一个li放到另一个ul并且当显示这个新的ul时。这个所有的li都是在zou hover时显示你可以做什么来显示所有li onli当一些人认为一个例子+ hover last show li（用户无需点击查看al！）。

 <style>
  ul span{display:none;}
   ul:hover span {display:block;/*position:absolute;left:200px;background-color:red;*/}
 </style>

 <ul>
 <li>123<div>1</div></li>
 <li>22<div>2</div></li>
 <span>
 <li>223<div>3</div></li>
 <li>223<div>3</div></li>
 <li>223<div>3</div></li>
 </span>
 </ul>

Jquery显示Div li子项onclick

3 个答案: