如何保留两张卡片并使用显示更多按钮隐藏一张

Question

如你所见，我有三张牌，可能还有多张。如何默认隐藏某些卡并通过单击"查看更多"按钮显示它们？例如，在这种情况下，我想隐藏最后一张卡片并通过单击"查看更多"来显示它。

有人可以帮忙吗？这将不胜感激

问候法案

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}
.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}
.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}
.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}
div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

Answer 1

你可以像这样非常简单地做到这一点：

$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");
  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }
  $(document).on("click", ".showMore", function() {
    hidEle.first().show();
    hidEle = $(".card-border:not(:visible)");
    if (hidEle.length == 0) {
      $(".showMore").hide();
    }
  });
});

在您的 CSS 中，我添加了：

.card-border:not(:nth-child(-n+3)) { // this show the first 2 elements
  display: none;
}

这将允许您在有任何隐藏.card-border时自动显示showMore按钮

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});
$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");
  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }
  $(document).on("click", ".showMore", function() {
    hidEle.first().show();
    hidEle = $(".card-border:not(:visible)");
    if (hidEle.length == 0) {
      $(".showMore").hide();
    }
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}
.card-border:not(:nth-child(-n+3)) {
  display: none;
}
.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}
.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}
.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}
div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

点击显示全部

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});
$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");
  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }
  $(document).on("click", ".showMore", function() {
    hidEle.show();
    $(".showMore").hide();
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}
.card-border:not(:nth-child(-n+3)) {
  display: none;
}
.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}
.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}
.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}
div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

"查看更少"按钮

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});
$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");
  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }
  $(document).on("click", ".showMore", function() {
    hidEle.show();
    $(".showMore").hide();
    $('.card-border:last').after('<button class="showLess">Show less</button>')
  });
  
  $(document).on("click", ".showLess", function() {
    $(".card-border").not(visEle).hide();
    $(this).remove();
    $(".showMore").show();
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}
.card-border:not(:nth-child(-n+3)) {
  display: none;
}
.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}
.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}
.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}
div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

Answer 2

将类 'hideclass' 添加到所有要隐藏的卡片中。希望这有帮助，谢谢

$('.hideclass').hide() //To hide extra contents
$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});
$(".show").on("click", function() {
 
  $(this).hide()
  $('.hideclass').show()
 
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}
.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}
.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}
.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}
div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border hideclass">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<div class="card-border ho-border hideclass">
  <h4 class="float-left">Post-trip test</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<button class="show">Show More</button>