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

Question

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

在这里，我试图显示1st 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-移除display: none; 从CSS。

 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>