CSS-翻页卡-内容彼此之间出现
嗨，我已经设计了翻页卡。实际上，问题在于“年度”标签上的“ 显示详细信息”链接无法正常工作。所以我无法显示隐藏的内容。我为显示内容编写的jQuery代码正常运行。因此，当我单击“显示详细信息”链接时，内容显示为一个显示。帮我解决这个问题。提前致谢。 注意：以上问题发生在移动视图上。
$(document).ready(function() {
$(".flip").on("click", function() {
$(this).addClass("btn-active").css({
"color": "#fff"
});
$(".flipreverse").removeClass("btn-active").css({
"color": "#000",
"transition": "0.5s ease-in-out"
});
$('.card').removeClass('flipped');
})
$(".flipreverse").on("click", function() {
$(this).addClass("btn-active").css({
"color": "#fff"
});
$(".flip").removeClass("btn-active").css({
"color": "#000",
"transition": "0.5s ease-in-out"
});
$('.card').addClass('flipped');
});
$(".show-pricing-details, .hide-pricing-details").on("click", function() {
if ($(this).text() == "Show Details") {
$(this).text("Hide Details").removeClass("show-pricing-details").addClass("hide-pricing-details");
$(this).parent().next().removeClass("hidden-xs hidden-sm").addClass("visible-xs visible-sm");
return false;
} else {
$(this).text("Show Details").removeClass("hide-pricing-details").addClass("show-pricing-details");
$(this).parent().next().removeClass("visible-xs visible-sm").addClass("hidden-xs hidden-sm");
return false;
}
});
});body {
padding: 60px;
}
.boost-your-sales-bottom-wrap {
padding: 20px 15px;
}
.bst-ur-sls-tgle-btn-wrp button {
width: 200px;
border: none;
outline: none;
font-size: 20px;
}
.bst-ur-sls-tgle-btn-wrp button:hover,
.bst-ur-sls-tgle-btn-wrp button {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
background-color: #fff;
border-radius: 25px;
}
.bst-yr-sls-nav {
border: 2px solid #555;
border-radius: 50px;
max-width: 448px;
background: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.btn-active {
background: #1e6c97 !important;
-webkit-transition: all 1s ease out;
-o-transition: all 1s ease out;
transition: all 1s ease-out;
border-radius: 25px;
}
.bst-ur-sls-tgle-btn-wrp button:first-child {
margin-left: 6px;
color: #fff;
}
.bst-ur-sls-tgle-btn-wrp .navbar-btn:active,
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus {
border: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.flipcontainer {
-webkit-perspective: 3500px;
-o-perspective: 3500px;
perspective: 3500px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transition: -webkit-transform 1s;
-webkit-transition: -webkit-transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.premium-card {
margin-top: -10px;
}
.premium-card>.front,
.premium-card>.back {
border: 2px solid #ffcc29 !important;
}
.card>div {
display: block;
width: 100%;
position: absolute;
border: 1px solid #ccc;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: #fff;
border-radius: 6px;
color: #555;
position: relative;
}
.card .back {
background: #fff;
top: 0;
text-align: center;
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
border-radius: 6px;
color: #555;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.flip-cards {
margin-top: 40px;
min-height: 2145px;
}
.col-xs-12,
.col-sm-12 {
margin-bottom: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/pi-header-n-footer.min.css" rel="stylesheet">
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="text-center">
<nav class="navbar navbar-default bst-yr-sls-nav">
<div class="container-fluid">
<div class="navbar-header bst-ur-sls-tgle-btn-wrp">
<button class="btn navbar-btn btn-active btn-active flip">Monthly</button> <button class="btn navbar-btn flipreverse"><b>Annual</b> <small>Save ~ 35%</small></button>
</div>
</div>
</nav>
<div class="row flip-cards">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
<section class="flipcontainer flip-section1">
<div class="card mrgn-btm-10">
<div class="front">
<h3 class="clr-1E6C97"><b>Corporate</b></h3>
<p>For Big Businesses</p>
<h2 class="price"><i aria-hidden="true" class="fa fa-usd"></i> <b>1448</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<p class="mrgn-top-30 flex-lft-right-pad sm-mrgn-btm-20" style="margin-bottom: 120px;">Premium Access to Marketplace Features + Digital Marketing Campaign</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2 mrgn-btm-10" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm"
href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="subsribe-btn-wrp flex-top-bdr">
<p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
<div class="back">
<h3 class="clr-1E6C97"><b>Corporate</b></h3>
<p>For Big Businesses</p>
<h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i> <b>869</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<p class="mrgn-top-30 mrgn-btm-30 flex-lft-right-pad">Premium Access to Marketplace Features + Digital Marketing Campaign</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2 mrgn-btm-10" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm"
href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="flex-top-bdr pricing-tbl-bg">
<div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
<p class="mrgn-0"><b>Priority Support</b></p>
</div>
</div>
<div class="flex-top-bdr flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
<p class="text-left">Priority support on Skype</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Priority support on e-mail</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="subsribe-btn-wrp flex-top-bdr">
<p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
<section class="flipcontainer flip-section2">
<div class="card premium-card">
<div class="front pad-top-10">
<h3 class="clr-1E6C97"><b>Diamond</b></h3>
<p>For Medium and Small Businesses</p>
<h2 class="price mrgn-top-10"><i aria-hidden="true" class="fa fa-usd"></i> <b>82</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<p class="mrgn-top-30 flex-lft-right-pad" style="margin-bottom:44px;"><u>Full Access</u> to Marketplace Features</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn btn-pi btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Phone Verification ($19 value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-bdr pricing-tbl-bg">
<div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
<p class="mrgn-0"><b>Priority Support</b></p>
</div>
</div>
<div class="flex-top-bdr flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
<p class="text-left">Priority support on Skype</p>
<p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Priority support on e-mail</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="subsribe-btn-wrp flex-top-bdr mrgn-btm-20">
<button class="btn btn-pi btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
</div>
</div>
</div>
<div class="back pad-top-10">
<h3 class="clr-1E6C97"><b>Diamond</b></h3>
<p>For Medium and Small Businesses</p>
<h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i> <b>49</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<h4><span class="label label-default bg-ffcc29 clr-555">Save US$396 per year</span></h4>
<p class="flex-lft-right-pad" style=""><u>Full Access</u> to Marketplace Features</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn btn-pi btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Office Address Verification ($99/year value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Identity Verification ($39 value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Phone Verification ($19 value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-bdr pricing-tbl-bg">
<div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
<p class="mrgn-0"><b>Priority Support</b></p>
</div>
</div>
<div class="flex-top-bdr flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
<p class="text-left">Priority support on Skype</p>
<p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Priority support on e-mail</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="subsribe-btn-wrp flex-top-bdr mrgn-btm-20">
<button class="btn btn-pi btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
<section class="flipcontainer flip-section3">
<div class="card">
<div class="front">
<h3 class="clr-1E6C97"><b>Pro</b></h3>
<p>For Consultants</p>
<h2 class="price"><i aria-hidden="true" class="fa fa-usd"></i> <b>65</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<p class="mrgn-top-30 flex-lft-right-pad"><u>Limited Access</u> to Marketplace Features</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn boost-btn btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Phone Verification ($19 value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-bdr pricing-tbl-bg">
<div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
<p class="mrgn-0"><b>Priority Support</b></p>
</div>
</div>
<div class="flex-top-bdr flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
<p class="text-left">Priority support on Skype</p>
<p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Priority support on e-mail</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn boost-btn btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
<div class="back">
<h3 class="clr-1E6C97"><b>Pro</b></h3>
<p>For Consultants</p>
<h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i> <b>39</b></h2>
<p class="text-center mrgn-btm-0">per month</p>
<p class="mrgn-top-30 flex-lft-right-pad"><u>Limited Access</u> to Marketplace Features</p>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn boost-btn btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
</div>
<div class="hidden-xs hidden-sm">
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Free Phone Verification ($19 value)</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="flex-top-bdr pricing-tbl-bg">
<div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
<p class="mrgn-0"><b>Priority Support</b></p>
</div>
</div>
<div class="flex-top-bdr flex-top-btm-pad">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
<p class="text-left">Priority support on Skype</p>
<p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
</div>
</div>
<div class="flex-top-btm-pad mrgn-btm-20">
<div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
<p class="text-left">Priority support on e-mail</p>
<p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
</div>
</div>
<div class="subsribe-btn-wrp flex-top-bdr">
<button class="btn boost-btn btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
卡的每月面控制着卡的年度面的高度。因此，当您切换到年度面时，无论您显示或不显示“详细信息”都无关紧要，父级Card div的高度不会改变。
您需要做一些进一步的调查，并找到一种方法来分别控制父div的高度，以使年度面的高度与每月面的高度无关。
如果您转到月度侧并单击第二张卡上的“显示详细信息”，然后转到年度侧，您将在第二张卡之后发现一个很大的空间。
对不起，我没有更多帮助，希望您能到达那里！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？