javascript - 使用相同的类 jQuery 在单击事件上仅显示一个打开的 DIV

Question

我有两张具有不同 ID 但类名相同的引导卡。我想选择打开和关闭元素，而不必为每个 ID 名称编写不同的函数。而是通过关键字或其他方式打开.card-reveal和关闭 Hidden Div 的类。任何帮助，将不胜感激。谢谢。CodePen 链接：https ://codepen.io/Corsurath/pen/eYYoZRV.close$(this)

$(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>

标签： javascriptjqueryonclickthisslidetoggle

Answer 1

您可以通过在按钮单击时遍历 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>