出现登录表单消失登录按钮，反之亦然

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">表示登录表单(，如果可能的话，我希望获得这些功能：

当我单击"登录按钮"(id=">

1. 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>