使用 jQuery 显示更多/显示更少 [英] Show more / show less with jQuery

问题描述

所以我有一个网页，我在其中编写了一个插件，允许客户购买其他产品，但我不希望在他们进入页面时显示所有这些产品.所以我正在寻找某种展示更多"

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

所以我正在寻找某种方式，在您进入页面时只显示 3 个产品，但如果您按下显示更多按钮，它将显示接下来的 3 个产品.

我看过很多关于此的帖子，但我找不到与此相关的任何内容.

附言.如果按显示更多"时可以有动画，那就太好了.

解决方案

你有类所以使用它并避免内联样式.还使用 jquery :gt()

//这将在页面加载时执行(更具体地说，发生文档就绪事件时)如果 ($('.ty-compact-list').length > 3) {$('.ty-compact-list:gt(2)').hide();$('.show-more').show();}$('.show-more').on('click', function() {//切换具有类 .ty-compact-list 的元素，使其索引大于 2$('.ty-compact-list:gt(2)').toggle();//将 show more element 的文本仅出于演示目的更改为此演示$(this).text() === '显示更多' ?$(this).text('Show less') : $(this).text('Show more');});

.ty-compact-list {填充:5px 5px 5px 0px；向左飘浮;宽度:100%；}.展示更多 {显示:无；光标:指针；}

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

So I have a webpage at which I have written an addon that allows customers to buy additional products, but I do not want all these products to be shown whenever they enter the page. So I am looking for some kind of "show more"

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

So I am looking for some kind of way to only show 3 products whenever you enter the page but if you press the show more button it will show the next 3 products.

I have seen many posts on this but I can not find anything related to this.

Ps. If there could be an animation when you press "show more", then that'd be great.

解决方案

You have class so use it and avoid inline-styles. Also check the following approach using 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>

这篇关于使用 jQuery 显示更多/显示更少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！