因此,我有一个网页,在该网页上我编写了一个插件,允许客户购买其他产品,但是我不希望在他们进入页面时显示所有这些产品。所以我正在寻找某种“显示更多”的东西



<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种产品。

我已经看到了很多关于此的帖子,但是我找不到与此相关的任何内容。

附言如果按“显示更多”时可能有动画,那就太好了。

最佳答案

您拥有类,因此请使用它,并避免使用内联样式。还要使用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>

关于javascript - 使用jQuery显示更多/更少显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39128483/

10-12 12:56
查看更多