Javascript 登录表单没有'；不要消失_Javascript_Jquery_Css_Html

Javascript 登录表单没有'；不要消失

javascript jquery css html

Javascript 登录表单没有'；不要消失,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在做一个学校作业的网页，我正在尝试做一个按钮，当你点击它时，它会弹出，然后当你再次点击它时，它会弹出。保存登录按钮的按钮应该隐藏整个表单，直到我将鼠标悬停在它上面，然后单击登录（瑞典语为“logga”）但是表格显示了整个时间有些代码是瑞典语的，但无论如何都不重要 HTML5： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"

我正在做一个学校作业的网页，我正在尝试做一个按钮，当你点击它时，它会弹出，然后当你再次点击它时，它会弹出。保存登录按钮的按钮应该隐藏整个表单，直到我将鼠标悬停在它上面，然后单击登录（瑞典语为“logga”）

但是表格显示了整个时间

有些代码是瑞典语的，但无论如何都不重要

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：

 @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;
}

klick函数的Javascript：

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

尝试包含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>


....
这里有一些html。。。。
$（文档）.ready（函数（）{
$（“#切换登录”）。单击（函数（）{
$（'#login'）.toggle（）；
});
});

页面中没有包含jquery，也没有等待文档准备就绪。查看jQuery网页。您需要在页面中添加jQuery文件。它正在工作。我现在已经准备好文档并链接到ajax，但仍然无法工作。。。ghaaa:）我认为代码没有任何问题。它在这把小提琴中工作：当按钮回到六边形时，我怎样才能让窗体自动隐藏？这工作！Ecxept表单显示整个时间，直到我点击它隐藏的登录按钮。当页面加载时，我必须以某种方式隐藏它。你可以使用css来隐藏它#登录{display:none；}我能再问你一个问题吗？当按钮返回六边形时，我试图让表单自动隐藏…使用结束转换事件：ex element.addEventListener（'WebKittTransitionEnd'，transitionListener，false）；但是如果你在按钮返回时隐藏它，你就不能使用你的表单，只要尝试一下，你就会意识到。

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