jquery滑動切換不觸發

Question

我試着jquery slidetoggle，但我有問題試圖運行它。請檢查提供的小提琴。 https://jsfiddle.net/2yL2Q/63/

當我點擊翻轉課程時，它沒有做任何事情。

代碼示例

<div class="some-div"> 
<div class="flip">Click to slide the panel down or up</div> 
</div> 
<div class="panel">Hello world!</div> 

<div class="some-div"> 
<div class="flip">Click to slide the panel down or up</div> 
</div> 
<div class="panel">Hello world!</div> 

<div class="some-div"> 
<div class="flip">Click to slide the panel down or up</div> 
</div> 
<div class="panel">Hello world!</div> 

腳本

$(document).ready(function() { 
    $(".some-div .flip").click(function() { 
     $(this).next('.panel').slideToggle("slow"); 
    }); 
}); 

Answer 1

您正在試圖選擇一個.panel元素是以下相鄰兄弟的點擊.flip元素。您的標記需要像這樣爲了您的jQuery的工作：

<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div> 

由於這些元素是不是在您提供的HTML的兄弟姐妹，你需要遍歷DOM和選擇的父元素。使用時只需將.parent() method：

Updated Example

$(".some-div .flip").click(function() { 
    $(this).parent().next('.panel').slideToggle("slow"); 
}); 

或者，如果元素的深度/嵌套變化，你也可以使用.closest() method：

Updated Example

$(".some-div .flip").click(function() { 
    $(this).closest('.some-div').next('.panel').slideToggle("slow"); 
});