Question

我已经编写了代码，但他们没有工作，请帮助我！我有一个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>

Answer 1

尝试将您的第一个if语句设置为以下内容：

if ($(".item-body").is(":visible")) {

而不是检查h1是否可见（它始终是可见的），这将解决问题。

其他说明

您的slideDown()错过了＆＃39;
您应该切换slideUp()和slideDown()，以便它slideUp()可见，slideDown()如果不可见 - 请参阅我的下面的例子。

请参阅this working JSFiddle。

使用嵌套div向下滑动

1 个答案: