jQuery slideDown（）不产生任何效果_Jquery_Html_Css_Slidedown

jQuery slideDown（）不产生任何效果

jquery html css

jQuery slideDown（）不产生任何效果,jquery,html,css,slidedown,Jquery,Html,Css,Slidedown,我试图使用jQuery创建一个递归演示，但到目前为止我还没有得到任何效果。我希望单击时div1向下滑动。div设置为位置：相对和显示：内联块，但单击时仍不会向下滑动。然而，控制台确实记录了它被点击的情况——它只是从来没有真正滑动过有人能解释一下这是怎么回事吗 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

我试图使用jQuery创建一个递归演示，但到目前为止我还没有得到任何效果。我希望单击时

div1

向下滑动。div设置为

位置：相对和显示：内联块
，但单击时仍不会向下滑动。然而，控制台确实记录了它被点击的情况——它只是从来没有真正滑动过
有人能解释一下这是怎么回事吗
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic Recursion</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>$(document).ready(function(){
$( "#div1" ).click(function() {
    console.log("clicked");
      $( "#div1" ).slideDown( "slow", function() {
        // Animation complete.
            console.log("slideDown");
      });
    });
});</script>
</head>

<body>
<div id="container">
<div id="content">
<h1>Tail Recursion</h1>
<div id="div1" class="red"></div>
<div id="div2" class="blue"></div>
<div id="div3" class="red"></div>
<div id="div4" class="blue"></div>
<div id="div5" class="blue"></div>
<div id="div6" class="red"></div>
</div>
</div>
</body>
</html>

问题是.slideDown（）用于显示当前不可见的元素。在您的例子中，元素是可见的，因此没有工作要做
如果默认情况下隐藏，.slideDown（）将显示它
<p id="showDiv1">Show Div 1</p>
<div id="div1" class="red" style="display: none;"></div>
<br style="clear:both;">

<script type="text/javascript">
$(document).ready(function(){
    $( "#showDiv1" ).click(function() {
        console.log("showDiv1 clicked");
        $( "#div1" ).slideDown( "slow", function() {
            // Animation complete.
            console.log("showDiv1 slideDown complete");
        });
    });
});

showDiv1


$（文档）.ready（函数（）{
$（“#showDiv1”）。单击（函数（）{
log（“单击showDiv1”）；
$（“#div1”）。向下滑动（“慢速”，函数（）{
//动画完成。
日志（“showDiv1向下滑动完成”）；
});
});
});

请参见此处的fiddle:
但您的元素已可见/显示。你的意思是说slideUp（）
？你真的了解slideDown（）的功能吗？它将图元高度从0更改为其正常高度。同时将“显示：无”更改为“显示：块”。您将看不到任何将slideDown应用于可见元素（非display:none；）的情况
是ID和类理解能力差的标志。使用例如：.clickable
代替所有元素，并在函数内部使用$（this）
引用此单击的元素。我很困惑，因为我也尝试了动画制作（{down:300px}），但没有成功。我已将内部函数更改为使用this
，但我不明白为什么要将css更改为。可单击。我最终希望红色和蓝色的方块有不同的行为，这就是为什么我给它们设置了不同的类。我错过了什么？
<p id="showDiv1">Show Div 1</p>
<div id="div1" class="red" style="display: none;"></div>
<br style="clear:both;">

<script type="text/javascript">
$(document).ready(function(){
    $( "#showDiv1" ).click(function() {
        console.log("showDiv1 clicked");
        $( "#div1" ).slideDown( "slow", function() {
            // Animation complete.
            console.log("showDiv1 slideDown complete");
        });
    });
});