堆栈内存溢出
  简体   繁体   English

登录表单不会消失

[英]Login form doesn't disappear

 原文  2014-09-20 16:33:14  9   1    javascript/ jquery/ css/ html5

问题描述

I'm doing a webpage for a school work and I'm trying to do a button that, when you click it, pops out and then when you click it again it pops in. The button that holds the login button should hide the whole form until I hover over it and then click login ("logga" in Swedish)... 我正在做一个学校作业的网页，我试图做一个按钮，当您单击它时，它会弹出，然后再次单击它时，它就会弹出。包含登录按钮的按钮应该隐藏整个按钮直到我将鼠标悬停在该表单上，然后单击“登录”（瑞典语中的“ logga”）...

But the form shows the whole time... 但是表格显示了整个过程...

Some of the code is in Swedish, but it should not matter anyway.. 有些代码是瑞典文，但无论如何都没关系。

HTML5: HTML5： 

    <!DOCTYPE html>
    <html>
        <head>
  <link rel="stylesheet" type="text/css" href="loggaIn.css">
  <link rel="stylesheet" type="text/css" href="Stylesheet_spelnord.css">
  <link rel="stylesheet" type="text/css" href="knapp.css">
  <script src="loggain.js"></script>
    <meta charset="utf-8"/>
        <title>Spelnörd</title>
        </head>
        <body>
                <header id="top_bg">
                    <h1 id="titel"> Spelnörd</h1>           
                </header>
<div class='hexagon'>
  <ul>
    <li class='polygon_top' id="toggle-login">
      <a href="#">Logga in
      <div id="login">
  <div id="triangle"></div>
  <h1>Log in</h1>
  <form>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </form>
</div></a>      
    </li>
    <li class='polygon_top'></li>
    <li class='polygon_top'>
      <a href="#">Dribbble</a>
    </li>
    <li class='polygon_bottom'>
      <a href="#">Forrst</a>
    </li>
    <li class='polygon_bottom'></li>
    <li class='polygon_bottom'>
      <a href="#">Twitter</a>
    </li>
  </ul>

</div>
    </body>
    </html>

CSS for the button: 按钮的CSS： 

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
  list-style-type: none;
}

/*=================================== container 
*/

.hexagon {
  position: absolute;
  top: 24.5%;
  left: 15%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  transform-origin: center;
  transform: scale(1.00005); 
}

/*=================================== top and bottom triangle
*/

.polygon_top,
.polygon_bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
  transition: width 0.3s ease-in-out, border 0.1s linear, border-radius 0.5s ease-in-out;
}

.polygon_top a,
.polygon_bottom a {
  color: rgba(55, 55, 55, 0);
  display: block;
  font-size: 0em;
  text-transform: uppercase;
  width: 100%;
  transition: color, font-size 0.3s;
}

.polygon_top:nth-child(1),
.polygon_top:nth-child(3),
.polygon_bottom:nth-child(4),
.polygon_bottom:nth-child(6) {
  cursor: pointer;
}

.polygon_top:nth-child(1):hover > a,
.polygon_top:nth-child(3):hover > a,
.polygon_bottom:nth-child(4):hover > a,
.polygon_bottom:nth-child(6):hover > a {
  color: #373737;
  font-size: 1em;
}

.polygon_top:nth-child(1) {
  border-bottom: 30px solid #E56717;
  right: 0;
  transform: translateX(-30px) translateY(-15px);
}

.polygon_top:nth-child(1):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #E56717;
  width: 120px;
  z-index: 100;
}
.polygon_top:nth-child(1) > a {
  line-height: 30px;
}

.polygon_top:nth-child(2) {
  border-bottom: 30px solid #E56717;
  transform: translateX(12px) translateY(15px);
}

.polygon_top:nth-child(3) {
  border-bottom: 30px solid #E56717;
  left: 0;
  transform: translateX(30px) translateY(-15px);
}

.polygon_top:nth-child(3):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #E56717;
  width: 120px;
  z-index: 100;
}

.polygon_top:nth-child(3) > a {
  text-align: right;
  line-height: 30px;
}

.polygon_bottom:nth-child(4) {
  border-top: 30px solid #565051;
  right: 0;
  transform: translateX(-30px) translateY(15px);
}

.polygon_bottom:nth-child(4):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #565051;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(4) > a {
  text-align: left;
  line-height: 30px;
  margin-top: -30px;
}

.polygon_bottom:nth-child(5) {
  border-top: 30px solid #565051;
  transform: translateX(12px) translateY(-15px);
}

.polygon_bottom:nth-child(6) {
  border-top: 30px solid #565051;
  transform: translateX(30px) translateY(15px);
}

.polygon_bottom:nth-child(6):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #565051;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(6) > a {
  text-align: right;
  line-height: 30px;
  margin-top: -30px;
}

CSS for the form: 形式的CSS： 

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

  #login{
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}

#triangle{
  width:0;
  border-top:12x solid transparent;
  border-right:12px solid transparent;
  border-bottom:12px solid #3399cc;
  border-left:12px solid transparent;
  margin:0 auto;
}

#login h1{
  background:#3399cc;
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}

form{
  background:#f0f0f0;
  padding:6% 4%;
}

input[type="email"],input[type="password"]{
  width:92%;
  background:#fff;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}

input[type="submit"]{
  width:100%;
  background:#3399cc;
  border:0;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

input[type="submit"]:hover{
  background:#2288bb;
}

Javascript for the klick function: klick函数的Javascript： 

$('#toggle-login').click(function(){
  $('#login').toggle();
});

1 个解决方案

解决方案1
 0  2014-09-20 18:05:48

Try include jquery and then your javascript code, and do it to the end of your body tag... 尝试包含jquery，然后包含您的JavaScript代码，然后将其添加到body标签的末尾... 

    <body>
    ....
    some html here ....
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#toggle-login').click(function(){
                $('#login').toggle();
            });
        });
        </script>
    </body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 预加载器不会消失 - Preloader doesn't disappear 出现登录表单消失登录按钮，反之亦然 - Appear Login form disappear Login button, and viceversa Chrome 无法识别我的登录表单 - Chrome doesn't recognize my login form 否则，如果不能在ajax登录表单中使用 - else if doesn't work in ajax login form ajax登录表单不起作用 - ajax login form doesn't work 在iPad上下拉菜单不会消失 - Dropdown doesn't disappear on iPad PHP和JS登录表单显示用户不存在错误 - PHP and JS Login form says user doesn't exist error 分解成组件后，登录表单React无法正常工作 - Login form React doesn't work when broken into components 当用户点击Enter时，Javascript登录表单不会提交 - Javascript login form doesn't submit when user hits Enter 来自 AliExpress 的 iframe 中的登录表单在 PhantomJS 中不起作用 - Login form in iframe from AliExpress doesn't work in PhantomJS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM