Question

我正在尝试使用HTML，CSS和JavaScript建立一个网站。但是现在我想创建一个登录界面。我已经添加了一些输入并编写了一个sign-in.js。它检查用户是否单击了我的登录符号。一切正常，只有一件事：当有人单击我的按钮时，我想显示输入。我的按钮是“用户齿轮”。这是我的代码：

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*/

}

希望您能帮助我。如果缺少某些信息，请告诉我。

丹尼尔。

Answer 1

您正在将课程添加到按钮中。您需要在表单/输入和样式上切换类。像这样

      $(".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;
       }

如何通过单击按钮显示多个输入？

1 个答案: