Question

我正在尝试减少我网站的加载时间，并且有很多脚本在我的网站上的登录/注册按钮功能上执行show hide。我希望所有用户都能登录并注册，因此想要消除这一点。

我决定使用纯CSS，有点hacky但我觉得它比使用JS更好。

我提到this回答，使用this jsfiddle来解决我的问题 - 这不是我的问题。

这是我的HTML：

<div class="header-login">

                    <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>

                    <div>
                        <form action="login" method="POST">
                            <input type="text" name="email" class="form-control" placeholder="Email">
                            <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password">
                            <input type="submit" name="submit" class="btn btn-default" value="Login">
                            <a href="forgot-password" class="btn btn-link">Forgot Password?</a>
                        </form>
                    </div>

            </div>

我让自己陷入了混乱，所以我不会发布我的尝试。我假设在隐藏的div中有表单对象不应该是个问题。

感谢您的帮助！

Answer 1

在您的问题中使用相同的JS Fiddle代码，如果您只是将#content应用于包装器并从css中删除span选择器，您可以看到它是如何完成的。成功：

JS Fiddle

HTML

<div class="header-login" id="content">

  <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>

  <div>
    <form action="login" method="POST">
      <input type="text" name="email" class="form-control" placeholder="Email">
      <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password">
      <input type="submit" name="submit" class="btn btn-default" value="Login">
      <a href="forgot-password" class="btn btn-link">Forgot Password?</a>
    </form>
  </div>

</div>

CSS

label {
  position: absolute;
  top: 0;
  left: 0
}

input#show,
input#hide {
  display: none;
}

#content {
  display: block;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

input#show:checked ~ .show:before {
  content: ""
}

input#show:checked ~ .hide:before {
  content: "Hide"
}

input#hide:checked ~ .hide:before {
  content: ""
}

input#hide:checked ~ .show:before {
  content: "Show"
}

input#show:checked ~ #content {
  opacity: 1;
  font-size: 100%;
  height: auto;
}

input#hide:checked ~ #content {
  display: block;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}


/* extra */

#content,
#content1,
#content2 {
  float: left;
  margin: 100px auto;
}

免责声明：我不建议复制/粘贴您认为不适用于您的应用的代码，但由于没有提供尝试，这应该是让您开始编写代码以满足您的需求。

单选按钮CSS显示隐藏div没有jQuery

1 个答案: