使用+-按钮显示更多，更少列表

Question

我想先显示5个列表项，并附加一些...，然后单击+按钮时，我们将显示所有列表，然后单击-时，我会显示撤消隐藏的项目。

我只需要先显示+，而不显示-，并且一旦显示列表，+就变成-来再次隐藏它们。

这是我的尝试：

https://jsfiddle.net/mpgt3znj/1/

谢谢

Answer 1

这是您的问题的解决方案，与Lakshan提供的良好链接有些不同。

它使用CSS隐藏超过给定值的列表项（使用伪类:nth-child(n+6)，该类与第六个或更大实例匹配）。仅当列表ul元素具有.expanded或.collapsed类时，下面的代码才能执行此操作。

一小段jquery然后将.expanded和.collapsed类切换为ul列表。单击切换按钮div，然后在翻转DOM树的折叠/展开状态之前，将其向上搜索到最接近的ul。

希望这会有所帮助

---

解决方案

// Add click event to all list togggles
$(".list-toggle").click(function() {

  // Move up DOM tree to nearest list
  // Toggle collapsed and expanded classes
  $(this).closest("ul").toggleClass("collapsed").toggleClass("expanded");

});

ul.collapsed > li:nth-child(n+6) {
  display: none;
}

ul.collapsed > .list-toggle > span.collapse, ul.expanded > .list-toggle > span.expand {
  display: none;
}

.list-toggle {
  width: 0.5em;
  padding: 0.25em;
  line-height: 0.5em;
  text-align: center;
  background: green;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

ul.expanded > .list-toggle {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>This list starts with the 'collapsed' class</p>

<ul class="collapsed">

  <li>Point one</li>
  <li>Point two</li>
  <li>Point three</li>
  <li>Point four</li>
  <li>Point five</li>
  <li>Point six</li>
  <li>Point seven</li>
  
  <div class='list-toggle'>
    <span class="expand">+</span>
    <span class="collapse">-</span>
  </div>

</ul>


<p>This list starts with the 'expanded' class</p>

<ul class="expanded">

  <li>Point one</li>
  <li>Point two</li>
  <li>Point three</li>
  <li>Point four</li>
  <li>Point five</li>
  <li>Point six</li>
  <li>Point seven</li>

  <div class='list-toggle'>
    <span class="expand">+</span>
    <span class="collapse">-</span>
  </div>

</ul>