javascript - 单击时我的 div 不会 slideDown()。

标签 javascript jquery css html

我正在尝试在我正在构建的小型网站上添加一个下拉菜单。出于某种原因,我可以获得我想要向下滑动到 fadeOut() 的 div 并执行其他类似的操作,但我无法将它获取到 slideDown()。我不知道为什么。上面有文字写着“菜单”。

jQuery 在下面。

 $(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 文档,但它只是用来在 Canvas 上绘制一些图片。我是一个业余爱好者,所以如果答案措辞简单会有所帮助。非常感谢您花时间阅读本文,如果有人能帮助像我这样的新手,我将不胜感激。

最佳答案

slideDown() only works on the elements which is hidden with jQuery methods or css display:none.

在你的问题中,你的 div 已经达到了它的高度。

因此您必须设置另一个包含您的菜单的 div 并将其设置为无显示; 然后单击菜单,您可以将其向下滑动。

我已经树立了榜样 Fiddle

更新Fiddle

关于javascript - 单击时我的 div 不会 slideDown()。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23670734/

相关文章:

javascript - jQuery 切换动画与 element.forEach

javascript - 加速 jQuery/Javascript 搜索功能

javascript - 如何在拖动元素时逐渐降低其不透明度?

html - 如何让音频在CSS中正确 float

php - 通过 CSS 从 PHP 变量中的值设置元素的背景图像

由 3 个图像组成的容器的 CSS

javascript - 是什么导致我的表格中的线条消失了,表格是使用 html、css 和 js 构建的?

javascript - 如何在 React Native 中从 FlatList 的一项进行导航?

jQuery 延迟与 jqXHR

jQuery、$.ajax 和 url 数组