下拉 Div 不起作用
[英]Dropdown Div Doesn't Work
问题描述
The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
下面的代码降不下来最多点击时的股利，它不执行anything.But我试着说在这里工作的确切代码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 File CSS文件
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
4 个解决方案
解决方案1
1 已采纳 2016-12-10 18:34:21
Pretty sure you haven't included jQuery.很确定你没有包含 jQuery。 The jQuery library is necessary for the script you want to run.要运行的脚本需要 jQuery 库。 You can download a copy of jQuery from here or you can use a copy hosted from Google .您可以从这里下载 jQuery 的副本，也可以使用Google 托管的副本。 jQuery has to be included before the code you want to run. 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>
解决方案2
0 2016-12-10 18:30:54
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:如果你在你的项目中包含了 jQuery，你可能想用一个在页面加载时执行的函数来包装你的代码，所以你确定一切都在那里：
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
解决方案3
0 2016-12-10 18:33:52
You can try like:你可以尝试像：
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
解决方案4
0 2016-12-10 18:36:43
It seems that are your not including the jQuery library in the head of the html file.您似乎没有在 html 文件的头部包含 jQuery 库。
Include the jquery library (it should be before your script):包括 jquery 库（它应该在你的脚本之前）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready.为了让 jQuery 修改 html 文档，它必须等到页面准备好。 You can do this by putting your function into:您可以通过将您的功能放入：
$(document).ready(function() {
// your code here
});
So your script will end up looking like:所以你的脚本最终看起来像：
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.