时间戳

首页 > 解决方案 > 点击后表单不消失

javascript - 点击后表单不消失

问题描述

我正在尝试创建一个登录表单，当用户单击登录按钮时该表单会出现和消失。下面的代码确保表单在开始时不显示，仅在用户单击时显示表单。但是，尽管第二次单击该按钮，表单并没有消失。我还包括下面的 jquery 字符串。我错过了什么还是因为 jquery 代码已经过时了？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function() {
  const arrow = $(".arrow-up");
  const form = $(".login-form");
  const status = false;

  $("#login").click(function(event) {
    event.preventDefault();
    if (status == false) {
      arrow.fadeIn();
      form.fadeIn();
      status == true;
    } else {
      arrow.fadeOut();
      form.fadeOut();
      status = false;
    }
  })
})
.arrow-up {
  width: 0;
  height: 0;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #e86b00;
  right: 750px;
  bottom: 10px;
  display: none;
}

.login-form {
  position: absolute;
  width: 300px;
  height: auto;
  background: #e86b00;
  top: 20px;
  right: -150px;
  border-radius: 3px;
  border-bottom: 5px solid gray;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#" id="login">LogIn</a></li>
<div class="arrow-up">
  <div class="login-form">
    <form>
      <div>
        <label style="color:black">Username:</label>
        <input type="text" placeholder="Username" id="usernm" autocomplete="new-password" required/>
      </div>
      <div>
        <label style="color:black">Password:</label>
        <input type="password" placeholder="Password" id="passw" autocomplete="new-password" required/>
      </div>
      <div>
        <input type="submit" />
      </div>
      <div>
        <a href="#">Lost Your Password</a>
      </div>
    </form>
  </div>
</div>

标签： javascripthtmljquery

解决方案

status == true;应该status=true

推荐阅读