仅在切换类时显示标题和段落

show heading and paragraph only when toggle a class?

本文关键字：显示 标题 段落      更新时间：2023-09-26

我想显示class="label"测试1,2,3,4"和标题2"一些文本"https://i.stack.imgur.com/mgerO.jpg仅当点击".card.selected"时

我想只在点击一个名为".card.selected"的类时显示"标题2"和段落？

这是我的代码

  <!DOCTYPE html>
  <html>
  <head>

    <script src="classie.js"></script>

    <script src="https://github.com/desandro/classie/blob/master/classie.js"></script>

  <style> 
  #main {
      width: auto
      height: auto
      border: 1px solid #c3c3c3;
      display: -webkit-flex;  

      -webkit-flex-direction: column;  
      display: flex;
      flex-direction: column;
    margin:10px;
  }
  #main div {
      width: 150px;
      height: 90px;
    display:block;
  }


   .card-container {
    height: 400px;
    perspective: 600;
    position: relative;
    width: 150px;
  }
  .card {
    height: 100%;
    position: absolute;
    transform-styvle: preserve-3d;
    transition: all 0.5s ease-in-out;
    width: 100%;
  }
  .card.selected {
   transform:  translatey(-90px);
  z-index: 99;

  }
  .card .side {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;

  }


   .
  #card-container: div {
      width: 150px;
      height: 90px;
    display:block;
  }
  .label {
    border: 1px solid black;padding: 2px;margin: 0;
    font-size: 250%;
    float:left;
    background-color: red;
  }
  .button{
       float:left;
  }

   #main img {
  border: 1px solid green;padding: 2px;margin: 0;
      padding: 1px;
      margin: 10;
      width: 400px;
      height:400px;
    display:inline;
  }
  h2 { 
     padding:0 5px;
     position: absolute; 
     top: 40px; 
   text-align: center;
     width: 100%; 
  }

  </style>
  </head>


  <body>
  <div id="main">

            <div >
                  <div class="card" onclick="myFunction(this)">
                        <div class="side">
                      <p class="label"> test 1 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                        <h2>some text </h2>
               </div>
              </div>
            </div>

        <div >
              <div class="card" onclick="myFunction(this)">
                  <div class="side">
                      <p class="label"> test 2 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>
               </div>
          </div>
        </div>


        <div >
              <div class="card" onclick="myFunction(this)">
                  <div class="side">
                      <p class="label"> test 3 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>
               </div>
          </div>
        </div>

        <div >
              <div class="card" onclick="myFunction(this)">
                  <div class="side">
                      <p class="label"> test 4 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>
               </div>
          </div>
        </div>


        <div >
              <div class="card" onclick="myFunction(this)">
                  <div class="side">
                      <p class="label"> test 5 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>
               </div>
          </div>
        </div>


        <div >
              <div class="card" onclick="myFunction(this)">
                  <div class="side">
                      <p class="label"> test 6 </p>
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="person 1 ">
                       <h2>some text </h2>
               </div>
          </div>
        </div>

    </div>

          <script>
              function myFunction(el) {      
                     classie.toggle(el, "selected" )// toggle class
                      }
          </script>

  </body>
  </html>

这可能就是您需要的

$('.card').click(function (el) {
    $(el.currentTarget).toggleClass('selected');
    console.log($(el.currentTarget));
})

和

  .card .label, .card h2 {
      display: none;
  }
  .card.selected .label, .card.selected h2 {
      display: block;
  }

完整代码：https://jsfiddle.net/tomi77/a0yxkqyh/

相关文章：