Ul清单展开-越来越少 [英] Ul list expand - less and more

问题描述

假设我有一个这样的人

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

我想使用jquery显示3 li，并在3后面添加一个名为 more 的更多li，然后单击show all li并在最后一个命名为less的li中添加

i want use jquery to show 3 li and after the 3 one append a more li named more and when click show all li and append in the last li named less

推荐答案

这应该有效.. =) 只需将索引更改为要显示的项目数即可.

This should work.. =) Just change index to the number of items you want to show.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
var index = 2;
$('ul li:gt('+index+')').hide();
$('ul').append('<li class="more">more...</li>');
$('ul li.more').click(function() {
  $('ul li.more').remove();
  $('ul li:gt('+index+')').show();
});
</script>

这篇关于Ul清单展开-越来越少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！