用jQuery显示/显示更少

Question

因此，我有一个网页，我写了一个插件，允许客户购买其他产品，但我不希望所有这些产品都在他们进入页面时显示。所以我要寻找某种“显示更多”

<div class="wrapper"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div> 
 
</div> 

所以我要寻找某种方式只有当你进入页面，但如果按节目展示3个款产品更多的按钮，它会显示接下来的3个产品。

我看过很多文章，但我找不到任何与此相关的内容。

Ps。如果在按“显示更多”时可能会出现动画，那就太好了。

Answer 1

你有班级使用它，并避免内联样式。还使用jQuery检查下面的方法:gt()

//this will execute on page load(to be more specific when document ready event occurs) 
 
if ($('.ty-compact-list').length > 3) { 
 
    $('.ty-compact-list:gt(2)').hide(); 
 
    $('.show-more').show(); 
 
} 
 

 
$('.show-more').on('click', function() { 
 
    //toggle elements with class .ty-compact-list that their index is bigger than 2 
 
    $('.ty-compact-list:gt(2)').toggle(); 
 
    //change text of show more element just for demonstration purposes to this demo 
 
    $(this).text() === 'Show more' ? $(this).text('Show less') : $(this).text('Show more'); 
 
});

.ty-compact-list { 
 
    padding: 5px 5px 5px 0px; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.show-more { 
 
    display: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="ty-compact-list">Product 1</div> 
 
    <div class="ty-compact-list">Product 2</div> 
 
    <div class="ty-compact-list">Product 3</div> 
 
    <div class="ty-compact-list">Product 4</div> 
 
    <div class="ty-compact-list">Product 5</div> 
 
    <div class="ty-compact-list">Product 6</div> 
 
    <div class="show-more">Show more</div> 
 
</div>

Answer 2

我喜欢做的是亚历克斯提出的基于类的方式，但或者你可以这样做：

function showFirstThree() 
    { 
    $('.ty-compact-list').hide(); 
    $('.ty-compact-list').slice(0,3).show(); 
    } 

    function showAll(){ 
    $('.ty-compact-list').show(); 
    } 

Answer 3

这里是使用切换的非常简单的答案。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    $('.showmoreButton').on('click', function() { 
 
     $('.showmore').slideToggle("fast"); 
 
     }); 
 
    }); 
 
</script> 
 
<div class="showmoreButton">Toggle Results</div> 
 
<div class="wrapper"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div> 
 
<div class="showmore" style="display: none;"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div> 
 
</div> 
 
</div>