使用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

我喜欢Alex提出的基于类的方法，但是您也可以这样做：

  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>