jquery - 隐藏所有 li 元素并显示前 2 个元素并通过按钮切换它们

Question

假设我有

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

我想要 jQuery 代码隐藏所有 <li>然后展示第一个和第二个然后append()额外的<li>more</li>用于切换隐藏李。

Answer 1

这应该可以做到..

// hide all li and then show the first two
$('ul li').hide().filter(':lt(2)').show(); 

// append a li with text more that on click will show the rest
$('ul').append('<li>more</li>').find('li:last').click(function(){
    $(this).siblings(':gt(1)').toggle();
});

演示:

$('ul li').hide().filter(':lt(2)').show();
$('ul').append('<li>more</li>').find('li:last').click(function() {
  $(this).siblings(':gt(1)').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<小时/>

更新以添加从多到少的更改文本..

$('ul li')
    .hide()
    .filter(':lt(2)')
    .show();

$('ul')
    .append('<li><span>more</span><span class="less">less</span></li>')
    .find('li:last')
    .click(function(){
        $(this)
            .siblings(':gt(1)')
            .toggle()
            .end()
            .find('span')
            .toggle();
    });

需要 css 规则 .less{display:none}

演示:

$('ul li')
  .hide()
  .filter(':lt(2)')
  .show();

$('ul')
  .append('<li><span>more</span><span class="less">less</span></li>')
  .find('li:last')
  .click(function() {
    $(this)
      .siblings(':gt(1)')
      .toggle()
      .end()
      .find('span')
      .toggle();
  });

.less {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>