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

荷兰同胞在这里与木材合作？哈哈。

问题如下：您计算所有li中的ul所有count并将其添加到一个变量{{1}中}}。您必须要做的是，每{{}}}计算其中有ul个li，如果它超过5，则只需添加一个在show more之下的ul按钮（现在，如果其中一个列表包含5个或更多项目，您现在可以在任何地方添加更多按钮）。我为你修复了你的代码。希望能帮助到你！ https://jsfiddle.net/admn32oe/12/

Veel成功了！： - ）

＆＃13;

$('.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();
});

＆＃13;

<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>

＆＃13;

Answer 2

我会考虑这个：

$('.showmore').each(function() { 
  var $parent = $(this).closest("dd"),
         $lis = $parent.find("li"),
         len  = $lis.length;
  $parent.find("li:gt(4)").hide(); // or something cleverer perhaps using eq
  $(this).toggle(len);
}).on("click",function() { 
  $(this).siblings("ul").children('li:gt(4)').toggle();
});

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

2 个答案: