我已经写了代码，但是它们不起作用，请帮助我! 我有一个 div 嵌套了另外两个 div。第一个 div 有 h2 标签，应该点击它以显示第二个 div 的内容，然后再次点击隐藏内容。 这里有我的代码，请调试它并帮助我继续前进。
$(document).ready(function() {
$("#toggle").click(function(){
if ($(this).is(":visible")){
$(".item-body").slidDown("normal");
} else {
$(".item-body").slideUp("normal");
}
});
});
.my-item{
width:250px;
heigth:180px;
margin:10px;
padding:20px;
background:green;
border:2px solid black;
}
.item-header{
width:150px;
heigth:120px;
margin:5px;
padding:10px;
background:yellow;
border:1px solid black;
}
.item-body{
width:70px;
heigth:50px;
margin:3px;
padding:5px;
background:purple;
border:1px solid black;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "UTF-8">
<title>Simple Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="my-item">
<div class="item-header">
<h2 id="toggle">Click Me!</h2>
<div class="item-body">My Text!
</div>
</div>
</div>
</body>
</html> 最佳答案
尝试将您的第一个 if 语句设置为以下内容:
if ($(".item-body").is(":visible")) {
这将解决问题，而不是检查 h1 是否可见(它始终可见)。
其他注意事项
- 您的
slideDown()有一个拼写错误，缺少一个“e”。 - 您应该切换
slideUp()和slideDown()以便它在可见时slideUp()并且slideDown()如果不是——请看我下面的例子。
关于javascript - 使用嵌套的div上下滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34602619/