显示登录名表单消失登录按钮，反之亦然

Question

我想知道是否有一种简单的方法（例如使用javascript）来实现这个想法。我有此代码（一个简单的代码段示例）：

<!-- LOGIN BUTTON -->
<div id="id01" class="text-login_button">
    <h1>Login.</h1>         
    <button onclick="document.getElementById('id02').style.display='block'" class="btn btn-login">Login Form</button>   
</div>

<!-- LOGIN FORM -->
<div id="id02" class="my-form">
    <form class="blablabla" action="" method="post">
        <div class="container">
            <input type="text" placeholder="Enter Username" name="uname" required>              
            <input type="password" placeholder="Enter Password" name="psw" required>                
            <button type="submit">Login</button>
        </div>
    </form>
</div>

好吧，当我单击“登录按钮”时，出现“登录表单”。到目前为止一切顺利。

但是现在，使用id号（即对于登录按钮使用id =“ 01”，对于登录表单使用id =“ 02”）如果可能的话，我希望获得这些功能：

1. 当我单击“登录按钮”（id =“ 01”）时出现“登录表单”（id =“ 02”），但我希望消失-同时-登录按钮”（id =“ 01”）;
2. ...反之亦然，当我关闭“登录表单”（id =“ 02”）时，必须再次出现“登录按钮”（id =“ 01”）。

任何想法？

Answer 1

这里是您想要的更干净的方法。您可以根据其属性切换div并提交表单。

function toggleLoginForm() {
  if (document.getElementById('id02').style.display !== 'block') document.getElementById('id02').style.display = 'block';
  else document.getElementById('id02').style.display = 'none';
}

function formSubmitFunction() {
  document.getElementById('id01').style.display = 'none';
  document.getElementById('id02').style.display = 'none';
  return false;
}

.my-form {
  display: none;
}

<!-- LOGIN BUTTON -->
<div id="id01" class="text-login_button">
  <h1>Login.</h1>
  <button onclick="toggleLoginForm()" class="btn btn-login">Login Form</button>
</div>

<!-- LOGIN FORM -->
<div id="id02" class="my-form">
  <form class="blablabla" onsubmit="return formSubmitFunction()" action="" method="post">
    <div class="container">
      <input type="text" placeholder="Enter Username" name="uname" required>
      <input type="password" placeholder="Enter Password" name="psw" required>
      <button type="submit">Login</button>
    </div>
  </form>
</div>