添加显示更多显示更少按钮

Question

在我的网站中，为了避免复杂性，我尝试使用 jQuery 添加显示越来越多的选项。但它不起作用。

我在这里尝试显示前 10 个列表。

点击显示更多后，应显示现有列表

//this will execute on page load(to be more specific when document ready event occurs)
if ($('.ty-compact-list').length > 10) {
  $('.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 {
  float: left;
}

.show-more {
  display: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container menuitem wrapper">
  <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list indo"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list platter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list d&i"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>
  <div class="show-more">Show more</div>
</div>

Answer 1

您的代码有一些问题。

1-$('.show-more').css("display", "block");

2-$(this).text($(this).text() === '显示更多' ? '显示更少' : '显示更多');

3- 从 css 中删除 display: none;。

if ($('.ty-compact-list').length > 3) {
  $('.ty-compact-list:gt(2)').hide();
  $('.show-more').css("display", "block");
}

$('.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($(this).text() === 'Show more' ? 'Show less' : 'Show more');
});

.ty-compact-list {
  float: left;
}

.show-more {
  cursor: pointer;
}

.filterDiv {
  float: left;
  background-color: #ffffff;
  width: 450px;
  text-align: center;
  margin: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 20px;
  border: 2.5px solid #0f2f16;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container menuitem wrapper">
  <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list indo"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list platter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list d&i"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>

  <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left">
    <h2 class="head2">onion soup</h2>
    <h3 class="head3">$200</h3>
    <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div>
  <div class="show-more">Show more</div>
</div>