查看相关按钮

Question

我想使用查看更多，并查看更少的按钮按钮为我> UL>李，我使用下面的代码，但它不工作。

$(document).ready(function() { 
    var list = $(".partners__ul li"); 
    var numToShow = 4; 
    var button = $(".partners__button__a"); 
    var numInList = list.length; 
    list.hide(); 
    if (numInList > numToShow) { 
    button.show(); 
    } 
    list.slice(0, numToShow).show(); 
    button.click(function() { 
    var showing = list.filter(':visible').length; 
    list.slice(showing - 1, showing + numToShow).fadeIn(); 
    var nowShowing = list.filter(':visible').length; 
    }); 
}); 

Answer 1

希望以下代码将帮助你。

$(document).ready(function() { 
 
    var list = $(".partners__ul li"); 
 
    var numToShow = 4; 
 
    var button = $(".partners__button__a"); 
 
    var numInList = list.length; 
 
    var isShowing = true; 
 
    list.hide(); 
 
    if (numInList > numToShow) { 
 
    button.show(); 
 
    } 
 
    list.slice(0, numToShow).show(); 
 
    button.click(function() { 
 
    var showing = list.filter(':visible').length; 
 
    if(isShowing){ 
 
     list.slice(showing - 1, showing + numToShow).fadeIn(100,onFadeComplete); 
 
    } 
 
    else{ 
 
     list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete); 
 
    } 
 
    
 
    
 
    }); 
 
    
 
    function onFadeComplete(){ 
 
    var nowShowing = list.filter(':visible').length; 
 
    
 
    if(nowShowing == numInList && isShowing){ 
 
     isShowing = false; 
 
     button.text("Show less"); 
 
    } 
 
    else if(isShowing){ 
 
     button.text("Show even more"); 
 
    } 
 
    
 
    if(nowShowing == numToShow){ 
 
     button.text("Show more"); 
 
     isShowing = true; 
 
    } 
 
    
 
    } 
 
});

.partners__ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.partners__ul li { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <ul class="partners__ul"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
    <li>Item 10</li> 
 
    <li>Item 11</li> 
 
    <li>Item 12</li> 
 
    </ul> 
 
    <button class="partners__button__a">Show More</button> 
 
</div>