javascript - 在类之间切换以在单击时滑入内容

Question

大家好，我正在寻求帮助，因为高温似乎正在融化我的大脑。我遇到了一个愚蠢的问题，在这种情况下，我可能应该休息一下，然后再回来处理这个问题，但是嘿。

基本上我想做的就是当用户单击“关于我”主按钮时添加/删除类，然后使用 .close 类按钮关闭。

出于某种原因，我就是看不出我有什么错，哈哈。我知道我需要 jquery 来添加/删除类。我还知道我需要设置一个新类来添加叠加层的事件状态并将宽度设置为 100%。我只是现在没有太多快乐。我让它在悬停时工作正常，但这对于移动设备来说还不够，所以我需要一个 onClick 事件。到目前为止想出了这个。我知道我很接近，任何帮助将不胜感激。提前致谢

Jquery 代码

//open on  click
$(".slideIn").click(function(){
   $(".overlay").addClass('.overlay-active');
}); 

//close on x button click
$(".close").click(function(){
   $(".overlay").removeClass('.overlay-active');
});

HTML 代码

 <section class="intro" role="region">
        <div class="split-screen row">
          <div class="col-sm-12 col-lg-6 left">
            <a class="btn-btn-primary slideIn" style="color:#fff;" title="link to landing page task" href="#"><h2>About Me</h2></a>

            <div class="overlay">
                <div class="text">
                    <figure class="col-lg-4"><img class="img-responsive" src="img/nick_avatar.png" ></figure>
                    <div class="col-lg-8">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                        <h3>Nick</h3>
                        <p>some text| some text | some text</p>
                        <q>a bit more text for us to read here, why not</q>
                        <br/><br/>
                        <h3>Lets Connect</h3>
                        <div class="social row">
                            <a href="#" class="tel" title="Call Me" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
                            <a href="#" class="mail" title="E-mail Me" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-envelope" aria-hidden="true"></i></a>
                            <a target="_blank" href="#" alt="Connect With Me On Twitter" title="Connect With Me On Twitter" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
                            <a target="_blank" href="#" alt="Connect With Me On LinkedIn" title="Connect With Me On LinkedIn" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
                            <a target="_blank href="#" alt="Connect With Me On CodePen" title="Connect With Me On CodePen" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-codepen fa-lg" aria-hidden="true"></i></a>
                            <a target="_blank" href="#" alt="Connect With Me On GitHub" title="Connect With Me On GitHub" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-sm-12 col-lg-6 right">
            <a class="btn-btn-primary" title="link to landing page task" href="#"><h2>To The Task</h2></a>
          </div>
        </div>
      </section>

CSS 代码

   html{
      height:100%
    }
    body{
      height:100%;
    }

    .intro{
      height:100%
    }

    .split-screen{height:100%;}

    .left{
      position: relative;
      display : flex;
      justify-content : center;
      align-items : center;
      background-color:#009dcc;
      height : 100%;
      color : #FFF;

    }
    .right{
      display : flex;
      justify-content : center;
      align-items : center;
      background-color:#FFF;
      height : 100%;
      color : #000000;
    }
    @media (max-width: 1200px) { 
      .left{
        height:50%
      }
      .right{
        height:50%
      }
    }

    .fa{margin:15px;}


    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 0;
      height: 100%;
      background-color: #008CBA;
      overflow: hidden;
      transition: .5s ease;
    }

    .overlay-active {
      width: 100%;
    }

    .fa{color:#ffffff;}
    .fa:hover{color:#fac600;}

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      width:84%;
      height:50%;
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      overflow: hidden;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    figure{padding:10px;}
    figure img{
        border:3px solid #fff;
        border-radius:50%;
    }
    .social{border-top: 2px solid #fff;}

    @media all and (max-width: 768px) {
    figure{display:none;}
    .text{padding:5px; height:67%;}
    }
    @media all and (max-width: 468px) {
    p,q{font-size:12px;}    
    }

Answer 1

在您的函数中，从 addClass() 和 removeClass() 中的类名中删除 .。使用它，您实际上添加了一个名为 .overlay-active 的类，其中包含 ..

此外，值得注意的是，您不需要 需要 jQuery 来添加或删除类。请记住，jQuery 只是 javascript。