Question

嗨，大家好寻求帮助，因为热量似乎在融化我的大脑。我有一个愚蠢的问题，在那些情况下我应该休息一下然后回到这个但是嘿。

基本上我想要做的就是当用户点击主要关于我按钮然后用.close类按钮关闭时添加/ removeClasses。

出于某种原因，我只是看不出我错了什么。我知道我需要jquery来添加/ removeClass。我也知道我需要设置一个新类来添加叠加层的活动状态并将宽度设置为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 CODE

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

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

1 个答案: