Question

我想展示class =＆＃34; label＆＃34; ＆＃34;测试1,2,3,4＆＃34;标题2＆＃34;某些文字＆＃34; http://imgur.com/j5XGYiL仅当＆＃34; .card.selected＆＃34;点击

我想展示＆＃34;标题2＆＃34;和段落仅在切换一个名为＆＃34; .card.selected＆＃34;的类时点击了吗？

这是我的代码

  <!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>

Answer 1

这可能就是你需要的

$('.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/

仅在切换课程时显示标题和段落？

1 个答案: