javascript - jQuery 在多个列表中有一个按钮隐藏/显示项目

Question

我正在尝试为我的网上商店过滤器制作一个按钮。一个过滤器中有多个“类别”。一个类别永远不会显示超过 5 个项目，无论有多少。

我需要的按钮将允许用户显示超过每个类别 5 个项目的默认值。换句话说，如果给定类别中有 7 个项目，则只会显示 5 个。剩下的 2 个将被隐藏。单击该按钮时，将显示所有 7 个项目。

我试过这样做但是当我按下按钮时它也会显示其他类别的项目..

var count = $('.block-layered-nav .block-content dl dd ul li').length;

if (count > 5) {
  $('.showmore').show();
  $('.block-layered-nav .block-content dl dd ul li:gt(4)').hide();
} else {
  $('.showmore').hide();
}

$('.showmore').on('click', function(e) {
  $(".block-layered-nav .block-content dl dd ul li:gt(4)").toggle().parent();
  alert(myparent('li'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="block block-layered-nav block-layered-nav--no-filters">
<div class="block-content toggle-content">
  <dl id="narrow-by-list">
    <dt>Wat</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
          Laat meer zien
      </button>
    </dd>
    <dt>Uitstraling</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
    Laat meer zien
  </button>
    </dd>
    <dt>Glans</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
          Laat meer zien
       </button>
    </dd>
  </dl>
</div>
</div>

Answer 1

荷兰同胞们，在用木头做东西吗？哈哈。

问题如下:您正在计算所有 ul 中的所有 li 并将它们加到一个变量中 count。你要做的是，对于每个 ul 计算其中有多少个 li，如果超过 5 个，则只添加一个 在那个 ul 下显示更多 按钮(现在，如果其中一个列表包含 5 个或更多项目，您将在任何地方添加显示更多按钮)。我为你修复了你的代码。希望能帮助到你! https://jsfiddle.net/admn32oe/12/

Veel 成功了! :-)

$('.block-layered-nav .block-content dl dd ul').each( function () {

  var count = $(this).children('li').length;

  if (count > 5) {
    $(this).next('.showmore').show();
    $(this).find('li:gt(4)').hide();
  } else {
    $(this).next('.showmore').hide();
  }

}); 

$('.showmore').on('click', function(e) {
    $(this).siblings("ul").children('li:gt(4)').toggle().parent();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block block-layered-nav block-layered-nav--no-filters">
  <div class="block-content toggle-content">
    <dl id="narrow-by-list">
      <dt>Wat</dt>
      <dd>
        <ul>
          <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>

        </ul>
         <button onclick="" class="showmore">
            Laat meer zien
        </button>
      </dd>
      <dt>Uitstraling</dt>
       <dd>
        <ul>
          <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li>
        </ul>
            <button onclick="" class="showmore">
      Laat meer zien
    </button>
      </dd>
      <dt>Glans</dt>
       <dd>
        <ul>
          <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li>
        </ul>
         <button onclick="" class="showmore">
            Laat meer zien
         </button>
      </dd>
    </dl>
  </div>
</div>