单击时，我的div将不会slideDown(). [英] My div will not slideDown() when clicked.
问题描述
我正在尝试在一个正在整合的小型网站上创建一个下拉菜单.出于某种原因，我可以将要向下滑动的div移到fadeOut()并执行其他类似操作，但不能将其移到slideDown().我不知道为什么.上面写着菜单"的文字.
I'm trying to have a drop down menu on a small website I am putting together. For some reason, I can get the div that I want to slide down to fadeOut() and do other things similar but I cannot get it to slideDown(). I have no idea why. There is text on it that says "Menu".
jQuery在下面.
The jQuery is below.
$(document).ready(function(){
$("#menu").click(function(){
$("#menu").moveDown(40px);
});
});
CSS在这里
body {
background-color:white;
}
#header {
width:1024px;
height:100px;
margin-top:-25px;
border:2px solid black;
border-radius:20px;
background-color:lightblue;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#menu {
position:relative;
height:400px;
width:200px;
background-color:blue;
border:2px solid black;
border-radius:15px;
margin-left:850px;
margin-top:-345px;
text-align:center;
}
#menuText {
margin-top:360px;
font-family:Verdana;
font-size:30px;
font-weight:bold;
}
#heading {
font-family:Verdana;
text-align:center;
margin-top:35px;
}
#myCanvas {
background-color:white;
}
canvas {
display:block;
margin:2px;
}
#body {
height:768px;
width:1024px;
margin-left:auto;
margin-right:auto;
border: 2px solid black;
border-radius:20px;
background-color:lightblue;
和HTML在这里.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="Document2.js"></script>
<link rel="stylesheet" type="text/css" href="Document1.css">
<title>Page Title</title>
</head>
<body>
<div id="menu">
<p id="menuText">Menu</p>
</div>
<div id="header">
<h1 id="heading">Hello There!</h1>
</div>
<div id="body">
<p>This is a line on my website.</p>
<p>This is another line on my website.</p>
<p>I want to make a game like Super Mario.</p>
<p>I alo want to make a Brick Breaker game.</p>
<h3>Below is an unfinished American Flag.</h3>
<p>The dimensions of the flag are exact. All the flag needs is some stars.</p>
<canvas id="myCanvas" width="190" height="100" style="border:2px solid black"> </canvas>
<canvas id="circle" width="500" height="250" style="border:2px solid black"> </canvas>
<p id="date"> </p>
</div>
<script src="Document1.js"></script>
</body>
</html>
我确实有另一个Javascript文档，但它仅用于在画布上绘制一些图片.我是一个业余爱好者，因此，如果回答的措辞简单，这将有所帮助.非常感谢您抽出宝贵的时间阅读本文，如果有人可以帮助像我这样的新手，我将非常感激.
I do have another Javascript document but it was only used to draw some pictures on canvas. I am an amateur so it would help if the answers were worded simply. Thank you so much for taking the time to read this and I will be so grateful if anybody can help a newbie like me.
推荐答案
slideDown() only works on the elements which is hidden with jQuery methods or css display:none.
在遇到问题时，您的div已经很高了.
In your problem your div is already at its height.
因此，您必须设置另一个包含菜单的div，并将其显示设置为none.
然后单击menu即可将其向下滑动.
So you have to set another div which will contain your menu and set it display to none;
then on click of the menu you can slide it down.
我已经举了一个例子 小提琴
I have set an example Fiddle
更新小提琴
Update Fiddle
这篇关于单击时，我的div将不会slideDown().的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
