转换不起作用的第一次点击

Question

我已经创建，点击一个div显示转换到正文。问题是点击div显示，但没有转换，第二次点击过渡工作。

我有这样的代码：

<ul class="nav navbar-nav navbar-right navSelected" id="topNav"> 
      <li><a href="index.php" class="home"> HOME</a></li> 
      <li><a href="about.php" class="about1"> ABOUT</a></li> 
      <li><a href="services.php" class="service"> SERVICES</a></li> 
      <li><a href="news.php" class="newsNav"> NEWS</a></li> 
      <li><a href="javascript:void(0)" class="contact" id="contact"> CONTACT</a></li> 


     </ul> 

接触点击链接时，DIV打开，所以我创造了这个过渡：

if($('#contactUs').hasClass('moveNav')=== false){ 
     $('#contactUs').addClass('moveNav'); 
     $('body').css('width', '82vw'); 
     $('body').css('transition', 'all .4s ease-in-out'); 
     $('.navWidth').css('width', '82vw'); 
     $('.navWidth').css('transition', 'all .4s ease-in-out'); 
     $('.topSection .cover2').css('margin-right','100px'); 
     $('.topSection .cover2').css('transition','all .4s ease-in-out'); 
     $('.svgMarqueeDesign').css('margin','22px'); 
     $('.textCover').css('width','50%'); 
     } 

，这是div代码：

<div id="contactUs" class="contactus"> 
<div class="text-right"><div id="close"></div> 

<div class="contactSvg"> 
     <svg class="menusvg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
      width="75.325px" height="123.408px" viewBox="0 0 75.325 123.408" enable-background="new 0 0 75.325 123.408" 
      xml:space="preserve"> 

</div> 
    <div class="text-center contactUsTitle"> 
     CONTACT US 
    </div> 


    <div id="contactUsForm"> 

     <div class="row"> 
      <div class=" contactUsInputs"> 

       <form action="#" method="post" id="myForm"> 


        <div class="form-group"> 
         <input type="text" class="form-control inputWidth" name="firstName" id="firstName" 
           placeholder="First Name"> 

        </div> 


        <div class="form-group"> 
         <input type="text" class="form-control inputWidth" id="lastName" name="lastName" placeholder="Last Name"> 
        </div> 


        <div class="form-group"> 
         <input type="email" class="form-control inputWidth" name="email" id="email1" 
           placeholder="E-mail Address"> 
        </div> 


        <div class="form-group"> 
         <select class="form-control selectList required " id="selectList" name="selectList" > 
          <option value="">What is this about?</option> 
          <option value="firstchoice">first Choice</option> 
          <option value="secondchoice">second Choice</option> 
          <option value="thirdchoice">third Choice</option> 
          <option value="fourthchoice">fourth Choice</option> 
         </select> 
        </div> 


        <div class="form-group textArea1"> 
         <textarea class="form-control inputWidth" rows="10" name="about" id="about" placeholder="write your message here"></textarea> 

        </div> 
        <div class="text-right"> 
         <button type="submit" class="btn learnMore send">send</button> 

        </div> 
       </form> 


      </div> 
     </div> 

    </div> 
</div> 

忘记了DIV长码，但它不是从第一次合作， 只有第二次转变工作由于IM提前

Answer 1

当你的代码被触发时它加载。你必须将它绑定到菜单的点击https://jsfiddle.net/xj0s3a66/

$(document).ready(function() { 
    $("#contact").click(function() { 
    if ($('#contactUs').hasClass('moveNav') === false) { 
     $('#contactUs').addClass('moveNav'); 
     $('body').css('width', '82vw'); 
     $('body').css('transition', 'all .4s ease-in-out'); 
     $('.navWidth').css('width', '82vw'); 
     $('.navWidth').css('transition', 'all .4s ease-in-out'); 
     $('.topSection .cover2').css('margin-right', '100px'); 
     $('.topSection .cover2').css('transition', 'all .4s ease-in-out'); 
     $('.svgMarqueeDesign').css('margin', '22px'); 
     $('.textCover').css('width', '50%'); 
    } 
    }); 
});