我正在尝试用HTML，CSS和JavaScript建立一个网站。 但是现在我想创建一个登录界面。 我已经添加了一些输入，并编码了一个sign-in.js。 它检查用户是否点击了我的登录符号。 除了一件事，一切都能正常工作:当有人点击我的按钮时，我想显示输入。 我的按钮是“User-Cog”。 下面是我的代码:
index.html:
<nav id="main-nav">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<a href="#home"><li> Home </li></a>
<a href="#about"><li> About </li></a>
<a href="#work"><li> Work </li></a>
<a href="#contact"><li> Contact </li></a>
<i class="fas fa-users-cog", id="user-cog"></i>
</ul>
<form id="sign-in">
<input class="input_text" type="text" tabindex="1" placeholder="E-Mail"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Passwort"><br>
<input id="sign-in-button" class="button" type="submit">
</form>
</nav>
sign-in.js:
$(document).ready(function() {
$(".fa-users-cog").on("click", function() {
$("header nav ul i").toggleClass("sign-in-open");
});
});
style.css:
#main-nav ul i.sign-in-open{
/*HERE SHOULD BE THE CODE TO SHOW THE INPUTS*/
}
我希望你能帮助我。 如果缺少一些信息，请告诉我。
丹尼尔。
您正在将类添加到按钮中。 您需要相应地在窗体/输入和样式上切换类。 像这样
$(".fa-users-cog").on("click", function() {
$(document).ready(function() {
//Add a class to the form
$("#sign-in").toggleClass("open");
});
});
像这样的风格
//Hide when it doesn't have the class open
#sign-in{
display:none;
}
#sign-in.open{
display:block;
}
