在 HTML 或 CSS 中单击按钮之前，如何隐藏表单？

Question

我想在一个按钮中隐藏一个 html 表单。我尝试在表单周围添加一个按钮，类似于带有子 div 的父 div，但这似乎不起作用。我对如何添加“隐藏”元素感到困惑。我必须使用 javascript 还是 jQuery？或者有没有一种简单的方法可以只使用 CSS 或 HTML？

提前致谢！！

/*LOGIN*/

html {
  background: #fff;
  font-size: 10pt;
}

.loginform ul {
  padding: 0;
  margin: 0;
}

.loginform il {
  display: inline;
  float: top right;
}

label {
  display: block;
  color: #ED4337;
}

label:hover {
  background-color: #fff;
  color: white;
  border-radius: 8px;
}

.cf:before .cf:after {
  content: "";
  display: table;
}

.cf:after {
  *zoom: 1;
}

 :focus {
  outline: 0;
}

.loginform input:not([type=submit]) {
  padding: 5px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
}

.loginform input[type=submit] {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #64c8ef;
  /*old browsers*/
  background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  /*FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #00a2e2));
  background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: linear-gradient(to bottom, #64c8ef 0%, #00a2e2);
  filter: progid:DXImageTransform.Microsoft.gradient ( startColors)='#64c8ef', endColorstr='#00a2e2', GradientType=0);
  color: #fff;
  padding: 5px 15px;
  margin-right: 0;
  margin-top: 15px;
  border-radius: 3px;
  text-shadow: 1px 1px 0px #fff;
}


/*END LOG IN */

<!--LOG IN INFO-->
<button class="log">Log In
         <section class="loginfrom cf">
          <form name="login" action="index_submit" method="get" accept-charset="utf-8">
            <ul>
              <li><label for="username">Email</label>
              <input type="email" name="usermail" placeholder="yourname@email.com"
              required></li>

              <li><label for="password">Password</label>
              <input type="email" name="password" placeholder="password" required></li>
              <li>
                <input type="submit" value="Login"></li>
            </ul>
          </form>
        </section>
      </button>
<!--END LOG IN INFO-->

Answer 1

首先，关闭按钮标签<button class="log">Log in</button>。然后，使用 css 隐藏表单，如.loginform { display: none; }

最后，要在用户单击按钮时显示表单，您可以使用 jQuery。

$('.log').click(function() {
    $('.loginform').css('display', 'block');
});

为了进一步了解 CSS 和 Javascript 以及它们如何协同工作，我强烈建议您阅读一些教程并查看 W3Schools 中的一些示例

https://www.w3schools.com/jquery/default.asp

https://www.w3schools.com/css/default.asp