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

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

转载作者：行者123 更新时间：2023-11-28 01:44:35

28

4

我正在尝试在我正在构建的小型网站上添加一个下拉菜单。出于某种原因，我可以获得我想要向下滑动到 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/

28

4

0

文章推荐： html - 未选择 CSS 类

文章推荐： java - 如何使用 Java 替换目录中的多个 HTML 标题？

文章推荐： javascript - 防止表单在没有ajax的情况下提交后重定向

文章推荐： javascript - D3.js 过渡多个弧路径

jquery - 父级 slideDown 中的子级 slideDown 溢出父级
A 使用 jquery 设计了一个两级菜单。当我将鼠标悬停在顶部菜单链接时，submenu 类名的 DIV 会向下滑动。当我将鼠标悬停在该 div 内时，会出现一个链接，类名为 subsubmenu
javascript - 在 SlideDown 在 PhoneGap 中可见之前触发 SlideDown 回调
我正在为 Android 手机构建 PhoneGap 应用程序。我使用这样的机制让用户将数据提交到 Web 服务: $('#backdrop').slideDown('fast',function()
jquery切换slideUp/slideDown
我有一个 div#items，如果单击它，则 div#choices slipDown()。如果再次单击，则 div#choices 应该 slipUp();我如何测试选择是否已经下降或上升？我知道我
jquery.slidedown
我是 jquery 新手，我正在尝试在下拉菜单上使用 .slidedown 函数。我希望菜单在单击时打开，并在再次单击选项或菜单时关闭。然而，当按原样单击菜单时，它只是弹开和关闭，而不是保持打开状态。
页面加载时的jquery slidedown
如何在 css 设置为 display:none 的页面加载时使用 jquery 向下滑动 div？我看到了很多解决方案，但如果 css 设置为 display:none，则没有一个可以滑动 div。
jQuery SlideDown() 第一次不工作
为什么slideDown()第一次不起作用？ $('#lnkInfo').click(function (e) { e.preventDefault(); $(this).blur()
jQuery SlideDown 弹回问题
我遇到了同样的问题，尽管我找不到解决方案，但我在网上读到了相关内容。简单地说，当在我的 DIV 元素上使用 SlideDown() 方法时，我得到了丑陋的回弹效果，其中 jQuery 将 DIV 大
javascript - Jquery SlideDown()
我在我的这个网站上使用 JQuery SlideUp 和 SlideDown。 http://ourrecipes.mdssoftware.com.au/ 在 IE 中这工作得很好。但在 Chrome
javascript - SlideDown 功能需要点击两次才能工作
我的网站上有一个 SlideDown 功能。但不知怎的，当你第一次点击它时它不起作用。所以我需要点击两次才能使该功能起作用。什么可能是错误的？我还希望当我再次点击按钮时div向上滑动，不知道我将如何
javascript - .slideDown() 不起作用
这应该很容易，但我检查了谷歌并没有找到任何相关信息。我正在做: $notification.slideDown(1000, function(){ $('#n
jquery - SlideDown 对我不起作用
为什么这个 jQuery 代码不起作用？ $(document).ready(function () { $('currentPage').click(function() {
jquery - 何时使用slideToggle或slideUp/slideDown
我们什么时候应该使用 jQuery 中的 slideUp/slideDown 以及什么时候使用 slideToggle 函数？slidetoggle 在 IE 中工作是否有问题？最佳答案当您想要向
jquery SlideDown 只能运行一次
我正在使用 jquery 制作一个向下滑动的菜单。该代码在页面第一次加载时完美运行。但是，slideDown(单击功能的基本部分)对于每个菜单项只能运行一次。这是一个 js fiddle 示例 htt
jQuery SlideDown 删除最后插入的列表项的数量？
大家好。我有一点问题。我有一个有序列表，其中包含一系列预先填充的列表项。 Item 1 Item 2 Item 3 Item 4 当我使用 jQuery 动态添加另
具有多个目标的 jQuery SlideDown
我希望有人能帮助我正确完成这项工作。我有这个 HTML: 1 view modules
jQuery - SlideDown 缓动
我想知道是否有任何方法可以使 SlideDown() 移动看起来更平滑，而无需使用 jQuery UI，只需使用普通的 jquery。我有这个功能: function optionz(){
jQuery SlideDown 使其他元素跳转
我正在尝试构建一个具有动态高度和数量的元素列表，当用户单击它们时，这些元素会上下滑动。问题是，当时只需要显示其中一个，而其他的则在点击后会自动向上滑动。我遇到了位于正在滑下的元素下方的元素的问题。它
javascript - 从其他页面调用 slideDown()
我在 profile.php 中有一个可用的 slideDown div。当我单击用户名时，个人资料信息会向下滑动。这是结构， profile.php - 这工作正常。 $('.showprofile
javascript - slideDown() 使包装器中的所有内容都移位
我目前正在创建一个简单的菜单，其中有多个服务名称，用户可以单击其中一个，jQuery 将在其下方显示相应的描述段落。我的 jQuery 代码很好，完全符合我的要求，但是，我有一个错误尚未解决。每当我
Jquery slideDown 弄乱了背景渐变
因此，当与 jQuery slideDown 函数结合使用时，我的渐变会出现令人讨厌的样式现象。我怀疑正在发生的事情是我在每个页面上都运行了一个全局渐变。在一页上我使用以下内容: function

首页

博学

6Ren·AI

商城

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