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