如您所见,我有3张卡片,可能还有更多张卡片。如何默认隐藏某些卡并通过单击“查看更多”按钮显示它们?例如,在这种情况下,我想隐藏最后一张卡片,然后单击“查看更多”来显示它。
有人可以帮忙吗?这将不胜感激
关于, 比尔
$(".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>
答案 0 :(得分:2)
您可以这样简单地完成它:
$(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;
}
如果有任何隐藏的showMore
.card-border
按钮
$(".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>
答案 1 :(得分:1)
将类别“ 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>