JQuery display Div li дочерние элементы onclick

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. Это все, когда вы показываете, когда zou hover ul bu zou может сделать, чтобы показать все 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>