我有一個(gè)ul塊，其中有15個(gè)li位置。

前5個(gè)li預(yù)先顯示，另外10個(gè)隱藏。我有一個(gè)切換這個(gè)UL的函數(shù)，如果我單擊這個(gè)按鈕，它會(huì)顯示10個(gè)li，但隱藏前5個(gè)。

我需要這樣的jQuery選擇器，這樣5 first可以每次都可見，而不是切換。 這段代碼選擇了所有這些

var ul = $(this).parent().attr('class');
 $('.'+ul+' li').toggle();

如果有一種方法可以選擇除了前5個(gè)以外的所有選項(xiàng)？

因?yàn)閱栴}下面的CSS標(biāo)簽，這里是一個(gè)完整的CSS片段。

/* hide */
#tgl:checked ~ul li:nth-child(5) ~li, #tgl {display: none; }
/* update label text */
#tgl:checked~[for="tgl"]:after             {content:' More'}
#tgl~[for="tgl"]:after                     {content:' Less'}
/*style label, easy demo */
label {appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari and Chrome */
}

<input type="checkbox" id="tgl" checked/>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<label for="tgl"> Show </label>

有幾種方法可以做到這一點(diǎn):

1)您可以使用切片功能

$("ul li").slice(5).hide();
$('button').click(function(e) {
  $("ul li").slice(5).toggle().addClass('redText');
  e.preventDefault();
})

.redText {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<button> click </button>

您需要使用:gt()

$(document).ready(function() {
  $(".ulClass li:gt(5)").hide();
  $('.clickMe').click(function() {
    $(".ulClass li:gt(5)").toggle();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='ulClass'>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
</ol>
<button class='clickMe'>Click me</button>

借用代碼片段用css選擇器而不是jQuery來顯示它

$('ul > li:nth-of-type(n+6)').addClass('redText');

.redText
{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>