只显示一个 DIV Open on Click Event with Same Class jQuery
Show Only One DIV Open on Click Event with Same Class jQuery
我有两张 Bootstrap 卡，ID 不同但名称 class 相同。我想 select 打开和关闭元素，而不必为每个 ID 名称编写不同的函数。而是通过 $(this) 关键字或其他替代方法打开和关闭隐藏 Div 的 classes .card-reveal 和 .close。任何帮助，将不胜感激。谢谢。 CodePen link: https://codepen.io/Corsurath/pen/eYYoZRV
$(function() {
$('#show').on('click', function() {
$('.show1').slideToggle('slow');
});
$('.show1 .close').on('click', function() {
$('.show1').slideToggle('slow');
});
});
$(function() {
$('#show2').on('click', function() {
$('.show2').slideToggle('slow');
});
$('.show2 .close').on('click', function() {
$('.show2').slideToggle('slow');
});
});
/*$(function(){
$('#show').on('click', function(){
$('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$('.card-reveal').slideToggle('slow');
});
});*/
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
您可以通过在按钮点击时遍历 DOM 来管理要切换的多张卡片
这是演示
jQuery(document).ready(function($) {
$(function(){
$('.card-content button.show').on('click', function(){
$(this).parents('.card-content').siblings('.card-reveal').slideToggle('slow');
});
$('.card-reveal button.close').on('click', function(){
$(this).parents('.card-reveal').slideToggle('slow');
});
});
});
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
您可以使用 element.next 方法切换下一个元素。
有一个演示。希望对你有帮助。
$('.show').on('click',function(){
$(this).parent().next(".card-reveal").slideToggle('show');
});
$('.close').on('click',function(){
$(this).parent().slideToggle('show');
});
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
为了使其更健壮，您可以为单击的元素分配一个属性，并使用它来定位您想要显示的内容。
为此，我将使用 card-reveal div 中的 class show1/show2 作为目标，并使用按钮上的属性 data-target，然后使用jQuery 将 data-target 匹配到 card-reveal。
HTML5 中的属性可以任意调用，但最佳做法是使用 data-custom-name.
<button type="button" id="show1"... 变为 <button type="button" id="show1" data-target="show1"（您不再需要 ID）。
您的 jQuery 代码将在点击时查找您的目标并切换它。
我还为关闭按钮添加了一个功能，您可以删除 data-dismiss="modal"，因为这是一个用于关闭 bootstrap 模式的 bootstrap 属性，在这里没有任何用处。
我从你的 codepen link 中获取了大部分内容（不得不从你的 link 中删除 ][1]）
jQuery(document).ready(function($) { //you should have one of these in your code already
$('.show').click(function(){ //same as on('click', function(){}); I just prefer this syntax
var target = $(this).attr('data-target'); //this will be card1 if the first is clicked.
$('.'+target).slideToggle('slow'); //add . for class selector and use the target variable to find the right element
});
$('.close').click(function(){ //close button
$(this).parent().slideToggle('slow'); //find the nearest parent and close it
});
});
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" data-target="show1" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" data-target="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
我有两张 Bootstrap 卡，ID 不同但名称 class 相同。我想 select 打开和关闭元素，而不必为每个 ID 名称编写不同的函数。而是通过 $(this) 关键字或其他替代方法打开和关闭隐藏 Div 的 classes .card-reveal 和 .close。任何帮助，将不胜感激。谢谢。 CodePen link: https://codepen.io/Corsurath/pen/eYYoZRV
$(function() {
$('#show').on('click', function() {
$('.show1').slideToggle('slow');
});
$('.show1 .close').on('click', function() {
$('.show1').slideToggle('slow');
});
});
$(function() {
$('#show2').on('click', function() {
$('.show2').slideToggle('slow');
});
$('.show2 .close').on('click', function() {
$('.show2').slideToggle('slow');
});
});
/*$(function(){
$('#show').on('click', function(){
$('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$('.card-reveal').slideToggle('slow');
});
});*/
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
您可以通过在按钮点击时遍历 DOM 来管理要切换的多张卡片
这是演示
jQuery(document).ready(function($) {
$(function(){
$('.card-content button.show').on('click', function(){
$(this).parents('.card-content').siblings('.card-reveal').slideToggle('slow');
});
$('.card-reveal button.close').on('click', function(){
$(this).parents('.card-reveal').slideToggle('slow');
});
});
});
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
您可以使用 element.next 方法切换下一个元素。
有一个演示。希望对你有帮助。
$('.show').on('click',function(){
$(this).parent().next(".card-reveal").slideToggle('show');
});
$('.close').on('click',function(){
$(this).parent().slideToggle('show');
});
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
为了使其更健壮，您可以为单击的元素分配一个属性，并使用它来定位您想要显示的内容。
为此，我将使用 card-reveal div 中的 class show1/show2 作为目标，并使用按钮上的属性 data-target，然后使用jQuery 将 data-target 匹配到 card-reveal。
HTML5 中的属性可以任意调用，但最佳做法是使用 data-custom-name.
<button type="button" id="show1"... 变为 <button type="button" id="show1" data-target="show1"（您不再需要 ID）。
您的 jQuery 代码将在点击时查找您的目标并切换它。
我还为关闭按钮添加了一个功能，您可以删除 data-dismiss="modal"，因为这是一个用于关闭 bootstrap 模式的 bootstrap 属性，在这里没有任何用处。
我从你的 codepen link 中获取了大部分内容（不得不从你的 link 中删除 ][1]）
jQuery(document).ready(function($) { //you should have one of these in your code already
$('.show').click(function(){ //same as on('click', function(){}); I just prefer this syntax
var target = $(this).attr('data-target'); //this will be card1 if the first is clicked.
$('.'+target).slideToggle('slow'); //add . for class selector and use the target variable to find the right element
});
$('.close').click(function(){ //close button
$(this).parent().slideToggle('slow'); //find the nearest parent and close it
});
});
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.card .card-image:hover img{
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);
}
.card{
font-family: 'Roboto', sans-serif;
border:none;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
background:#1A9AE1;
color:white;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 24px;
font-weight: 200;
}
.card .card-reveal{
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin:20px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show" data-target="show1" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show1">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-image">
<div class="wrap">
<img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
</div><!-- card image -->
</div>
<div class="card-content bg-light text-dark">
<span class="card-title">Some Title</span>
<button type="button" id="show2" data-target="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
</div><!-- card content -->
<div class="card-reveal show2">
<span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>