javascript - 单击时，项目列表不会显示更多和更少的项目

Question

不知何故，我的项目列表在单击按钮时没有显示更多或显示更少。

首先，您应该看到 3 个项目和一个带有“+”的按钮。然后，当您单击“+”时，应显示其他项目，然后单击“-”时，项目再次限制为 3 个项目。

$(document).ready(function () {
  var x = $("#list .content"),
      y = "<span class='present'>+</span>";
  x.find("a").length > 3 && (x.toggleClass("div_hide"), x.append(y)),
  $(".present").click(function () {
    $(this).parent().toggleClass("div_hide"), "-" == $(this).text() 
      ? $(this).html("+") 
      : $(this).html("-")

#list .div_hide a:nth-child(n+3) {
  display: none !important;
}
span.present {
  display: block;
  color: black;
  background: yellow;
}

<h1>List</h1>
  <div id="list">
    <a class="content" href="#">one</a>
    <a class="content" href="#">two</a>
    <a class="content" href="#">three</a>
    <a class="content" href="#">four</a>
    <a class="content" href="#">five</a>
    <a class="content" href="#">six</a>
  </div>

标签： javascriptjqueryhtmlcss

Answer 1

我根据您的代码制作了一个动态示例。

  var $listElements = $("#list a");

      $listElements.hide();
      $listElements.filter(':lt(2)').show();
            $('#list').append('<a><span>+</span><span class="less">-</span></ai>');

$("#list").find('a:last').click(function(){
    $(this).siblings(':gt(1)').toggle('slow');
    $(this).find('span').toggle();
});

您可以拥有任意数量的内容元素

<h1>List</h1>
  <div id="list">
    <a class="content" href="#">one</a>
    <a class="content" href="#">two</a>
    <a class="content" href="#">three</a>
    <a class="content" href="#">four</a>
    <a class="content" href="#">five</a>
    <a class="content" href="#">six</a>
  </div>

https://jsfiddle.net/ahentea/jwLhd7o2/