如何仅显示前4个HTML元素并隐藏其余元素？

Question

我有一个像这样的菜单列表：

粗体为父级，细体为子级。 当用户第一次看到此菜单时，我只想显示前4个孩子，要看到其余用户可以单击“显示更多”，大致如下：

在不更改HTML元素结构的情况下，如何仅通过使用CSS，JavaScript和jQuery隐藏子级的其余部分并添加更多显示切换以显示/隐藏子级的其余部分，该如何实现？

孩子的HTML结构：

<div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Body Oil</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Foot Care</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Lip Service </span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Massage</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Sunscreen</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Eye Cream</span></a></div>
</div>

Answer 1

使用nth-of-type，如下所示。为了显示越来越少，请使用toggleClass。

$('#more').on("click", function() {
  var text = $(this).text();
  if (text == 'Show-More') {
    $(this).text('Show-Less');
    $('.nav-item').toggleClass("nav-item newClass");
  } else {
    $('.newClass').toggleClass("newClass nav-item");
    $(this).text('Show-More');
  }
});

.nav-item:nth-of-type(1n+5) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Body Oil</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Foot Care</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Lip Service </span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Massage</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Sunscreen</span></a></div>
  <div class="nav-item level2"><a href="#" class=" nav-anchor"><span>Eye Cream</span></a></div>
  <span id='more'>Show-More</span>
</div>

Answer 2

最简单的方法是：

1. 添加显示更多和显示较少 li。
2. 在这些li上绑定事件处理程序。
3. 根据列表大小显示/隐藏适当的li。

这是代码：

$('.show-more').on('click', function() {
  $('.nav-menu li:gt(3)').show();
  $('.show-less').removeClass('hidden');
  $('.show-more').addClass('hidden');
});

$('.show-less').on('click', function() {
  $('.nav-menu li:gt(3)').hide();
  $('.show-more').removeClass('hidden');
  $('.show-less').addClass('hidden');
});

//Show only four items
if ($('.nav-menu li').length > 4) {
  /*$('.nav-menu li:gt(3)').hide();
  $('.show-more').removeClass('hidden');
  */

  $('.show-less').click();
}

.show-more,
.show-less {
  font-size: 13px;
  line-height: 140%;
  background-color: rgba(120, 120, 200, 0.5);
  display: inline-block;
  cursor: pointer;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-menu">
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Body Oil</span></a></li>
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Foot Care</span></a></li>
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Lip Service </span></a></li>
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Massage</span></a></li>
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Sunscreen</span></a></li>
  <li class="nav-menu-item level2"><a href="#" class=" nav-anchor"><span>Eye Cream</span></a></li>
</ul>

<div class='show-more hidden'>SHOW MORE>></div>
<div class='show-less hidden'>
  << SHOW LESS</div>