Question

我正在尝试在我正在整理的小型网站上提供下拉菜单。出于某种原因，我可以得到我想要滑到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文档，但它只用于在画布上绘制一些图片。我是一名业余爱好者，所以如果答案措辞简单，那会有所帮助。非常感谢您花时间阅读本文，如果有人能帮助像我这样的新手，我将非常感激。

Answer 1

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

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

所以你必须设置另一个包含菜单的div并将其设置为none; 然后点击menu，你可以将其滑下来。

我设置了一个示例 Fiddle

更新Fiddle

Answer 2

您应该执行以下操作：

$(document).ready(function(){
    $("#menu").click(function(){
        $("#menu").slideDown('40px');
    });
});

Answer 3

SlideDown无效，因为它已经可见，请尝试“slideUp”或“slideToggle” 更好地理解它。 slideDown会将“不可见”div转换为“可见”，而slideUp会将“可见”div转换为“不可见”。

让你的div成为另一个div的孩子，然后像这样切换：

更改html：

<div id="menuSlide">
    <div id="menu">
        <p id="menuText">Menu</p>
    </div>
</div>

更改css：

    #menu {
        float: left;
        position: relative;
        height: 400px;
        width: 200px;
        background-color: blue;

    }

            #menuSlide {
        float: left;
        position: relative;
        height: 420px;
        width: 200px;
        background-color: pink;
        border: 2px solid black;
        border-radius: 15px;
        margin-left: 850px;
        margin-top: -345px;
        text-align: center;
    }

更改javascript：

    $(document).ready(function () {
        $("#menuSlide").click(function () {
            $("#menu").slideToggle('80px');
        });
    });

这至少可以让你更好地了解它是如何工作的...... 四处游玩并做出相应的更改

Answer 4

此代码有效：

$(document).ready(function(){
    $("#menu").click(function(){
        $("#menu").css("margin-top","40px")
    });
});

然后，您需要将#menu的css定位更改为position: absolute

<强>编辑：

要使其动画，只需添加css过渡：

transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;

Answer 5

首先隐藏子节点。

#menuText {
     display:none;
     margin-top:360px;
     font-family:Verdana;
     font-size:30px;
     font-weight:bold;display:none;
}

然后有这个事件处理程序..

$(document).ready(function(){ 
     $("#menu").click(function() {
          $("#menuText").slideDown(100);
     });
});

单击时我的div不会slideDown（）。

5 个答案: