Question

以下代码在点击时不会下拉和向上移动div，它不执行任何操作。但我正在尝试在此处运行的确切代码http://jsfiddle.net/vNeXq/

<html>
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
        $('#login').click(function(){
    $('#loginForm').slideToggle('fast');
});
    </script>
</head>
<body>
    <div id="loginWrapper">
        <a id="login">Login</a>
        <div id="loginForm">
            <form name="login" method="post">
                <input type="text" name="username" placeholder="Username" />
                <input type="password" />
                <input type="submit" value="Login" />
            </form>
        </div>
    </div>
</body>

CSS文件

    #loginWrapper
    {
        width:400px;
        background-color:#F0F0F0;
    }
    #login 
    {
        cursor:pointer;
    }
    #loginForm 
    {
        display:none;
    }

Answer 1

很确定你没有包含jQuery。 jQuery库对于您要运行的脚本是必需的。您可以从here下载jQuery副本，也可以使用副本hosted from Google。必须在要运行的代码之前包含jQuery。

<html>
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="loginWrapper">
        <a id="login">Login</a>
        <div id="loginForm">
            <form name="login" method="post">
                <input type="text" name="username" placeholder="Username" />
                <input type="password" />
                <input type="submit" value="Login" />
            </form>
        </div>
    </div>
    <!-- INCLUDE JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>

      $(document).ready(function(){
         $('#login').click(function(){
              $('#loginForm').slideToggle('fast');
          });
      }):

    </script>
</body>
</html>

Answer 2

如果你在项目中包含了jQuery，你可能希望用一个在页面加载时执行的函数包装你的代码，所以你确定一切都在那里：

$(document).ready(function(){
   $('#login').click(function(){
        $('#loginForm').slideToggle('fast');
    });
})

Answer 3

您可以尝试：

    <script>
            $(document).ready(function(){
               $(document).on('click','#login',function(){
                    $('#loginForm').slideToggle('fast');
                });
            });

    </script>

Answer 4

似乎你不在html文件的头部包含jQuery库。

包含jquery库（它应该在你的脚本之前）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

为了让jQuery修改html文档，它必须等到页面准备就绪。您可以通过将您的函数放入：

来完成此操作

$(document).ready(function() { 
     // your code here
});

所以你的脚本最终看起来像：

$(document).ready(function() {
      $('#login').click(function(){
        $('#loginForm').slideToggle('fast');
      });
});

下拉Div不起作用

4 个答案: