Question

我尝试使用jQuery创建递归演示，但到目前为止我还没有获得任何效果。我希望div1在点击时向下滑动。 div设置为position:relative;和display:inline-block但单击时仍然不会向下滑动。但是，控制台会记录它被点击的内容 - 它实际上从未实际滑动过。

有人能解释一下这里发生了什么吗？

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>

CSS

@CHARSET "UTF-8";

html,body {
    width: 99%;
    height: 99%;
}

#container {
    display: inline;
    position: absolute;
    width: 70%;
    left: 14.5%;
    min-height: 50%; border : 1px solid;
    padding: 1%;
    border: 1px solid;
}

#content {
    position: relative;
    width: 68%;
    display: inline;
    float: left;
    border: 1px solid;
    height: 700px;
}

.red {
    position: relative; 
    width : 80px;
    height: 80px;
    background-color: red;
    display: inline-block;
}

.blue {
    position: relative; 
    width : 80px;
    height: 80px;
    background-color: blue;
    display: inline-block;
}

Answer 1

问题是.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");
        });
    });
});

请参阅此处的小提琴：http://jsfiddle.net/grLnzyjn/

jQuery slideDown（）不起作用

1 个答案: