转换在第一次点击时不起作用

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 的长代码，但它从第一次开始就不起作用， 只有第二次过渡工作谢谢我提前

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%');
    }
  });
});