gpt4 book ai didi

javascript - 使用嵌套的div上下滑动

转载 作者:行者123 更新时间:2023-11-30 00:16:10 27 4
gpt4 key购买 nike

我已经写了代码,但是它们不起作用,请帮助我!我有一个 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()如果不是——请看我下面的例子。

参见 this working JSFiddle .

关于javascript - 使用嵌套的div上下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34602619/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com