向下滑动嵌套div

我已经编写了代码，但他们没有成功，请帮助我！我有一个div与另外两个div嵌套。第一个div有h2标签，应该点击以显示第二个div的内容，然后再次点击以隐藏内容。这里我有我的代码，请调试它，并帮助我前进。向下滑动嵌套div

\t $(document).ready(function() { 
 
\t  $("#toggle").click(function(){ 
 
\t 
 
\t   if ($(this).is(":visible")){ 
 
\t    $(".item-body").slidDown("normal"); 
 
\t   } else { 
 
\t    $(".item-body").slideUp("normal"); 
 
\t   } 
 
\t  }); 
 
\t }); 
 
\t

.my-item{ 
 
\t width:250px; 
 
\t heigth:180px; 
 
\t margin:10px; 
 
\t padding:20px; 
 
\t background:green; 
 
\t border:2px solid black; 
 
} 
 
.item-header{ 
 
\t width:150px; 
 
\t heigth:120px; 
 
\t margin:5px; 
 
\t padding:10px; 
 
\t background:yellow; 
 
\t border:1px solid black; 
 
} 
 
.item-body{ 
 
\t width:70px; 
 
\t heigth:50px; 
 
\t margin:3px; 
 
\t padding:5px; 
 
\t background:purple; 
 
\t border:1px solid black; 
 
} 
 
\t

<!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> 
 
\t <div class="my-item"> 
 
\t <div class="item-header"> 
 
\t <h2 id="toggle">Click Me!</h2> 
 
\t <div class="item-body">My Text! 
 
\t </div> 
 
\t </div> 
 
\t </div> 
 
\t </body> 
 
    </html>

来源

2016-01-05 Moonlight

只是一个快速现场问题。你在哪里改变切换的可见性？你滑动兄弟项目的身体。 – Taplar

这是详细的问题。在此先感谢 – Moonlight

我不是在谈论你想做什么。我在谈论你在做什么。 '$（this）.is（“：visible”）'在你的点击处理程序中，'this'是切换元素，就我的逻辑而言，它总是可见的。 – Taplar

试试你的第一if语句设置为以下：

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

不是检查，如果h1是可见的（它总是会），这将解决问题。

其他说明

你必须与你slideDown()一个错字缺少一个 'e'。
你应该切换slideUp()和slideDown()使其slideUp()■当它是可见的，它slideDown()■如果它不是—看我下面的例子。

请参阅this working JSFiddle。

来源

2016-01-05 01:08:27

非常感谢，现在它可以工作。：） - 我犯了一个愚蠢的错误。：D – Moonlight

@Mahtab我很高兴我的帮助！（只要确保“接受”这个答案，如果它的确按—按绿色检查！） –

@JohnHascall感谢您的更正。 –

向下滑动嵌套div

回答

相关问题