向下滑動嵌套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

回答

相關問題