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

研究员荷兰人在这里，做某件事情用木头？哈哈。

问题是以下几点：你正在计算你所有的li的所有ul's并将它们加入到一个变量count中。你需要做的是，每个ul计算其中有多少个li，如果它超过5，只需在该ul下添加一个show more按钮（现在，您正在添加显示更多按钮如果其中一个列表包含5个或更多项目）。我为你解决了你的代码。希望能帮助到你！ https://jsfiddle.net/admn32oe/12/

Veel succes verder！ :-)

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

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