隱藏/顯示列表的第n項

Question

後，我有兩個列表：

<div class="list"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
<a href="#" class="btn-more"><img src="../img/more.png"></a> 
</div> 

<div class="list"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
<a href="#" class="btn-more"><img src="../img/more.png"></a> 
</div> 

我想顯示三個第一項。和顯示/隱藏（切換）中的其他項目，當我點擊.btn-more

我嘗試一些動態數：

$('.list ul').each(function(){ 
    var max = 2; 

    if ($(this).find("li").length > max) { 
     $(this).find('li:gt('+max+')').hide() 
    } 
}); 

這是工作，但我不知道在哪裏可以爲我的按鈕添加我的代碼顯示/隱藏其他項目。

Answer 1

我會用CSS做到這一點，只需撥動使用jQuery類（控制的顯示/隱藏）

$('.list .btn-more').on('click',function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('.list').toggleClass('open'); 
 
});

.list li:nth-child(n+3){display:none;} 
 
.list.open li:nth-child(n+3){display:list-item;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"> 
 
    <img src="../img/more.png"> 
 
    </a> 
 
</div> 
 

 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"> 
 
    <img src="../img/more.png"> 
 
    </a> 
 
</div>

Answer 2

可以使用:gt()選擇的jQuery。演示：

$("li:nth-of-type(1n+4)").hide(); 
 

 

 
$(".btn-more").click(function() { 
 
    $(this).closest(".list").find("ul>li:gt(2)").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"> 
 
    <img src="../img/more.png"> 
 
    </a> 
 
</div> 
 

 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"> 
 
    <img src="../img/more.png"> 
 
    </a> 
 
</div>

Answer 3

您可以將所有低於2裏的所有列表使用隱藏：

$('.list ul').each(function(){ 
    $('li:lt(2)', this).hide(); 
}); 

然後，你可以點擊事件添加到按鈕類和顯示所有相關李氏：

$('.btn-more').on('click', function(){ 
    $(this).closest('.list').find('ul li').show(); //Show all 
}) 

希望這有助於。

show_less(); 
 

 
$('.btn-more').on('click', function(e){ 
 
    e.preventDefault(); 
 

 
    var parent = $(this).closest('.list'); 
 

 
    if(parent.find('li:visible').length==3){ 
 
    $('img', this).attr('src','http://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png'); 
 

 
    parent.find('ul li').show(); //Show all 
 
    }else{ 
 
    $('img', this).attr('src','http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.png'); 
 
    show_less(); 
 
    } 
 
}) 
 

 
function show_less(){ 
 
    $('.list ul').each(function(){ 
 
    $('li:gt(2)', this).hide(); 
 
    }); 
 
}

img{ 
 
    width:25px; 
 
    height:25px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"><img src='http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.png' /></a> 
 
</div> 
 

 
<div class="list"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    </ul> 
 
    <a href="#" class="btn-more"><img src='http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.png' /></a> 
 
</div>