約束切換效果

Question

我把這個jQuery放在一起，當文檔準備好時div與bio.read_more類被隱藏。

爲a標籤的默認行爲與e.preventDefault

刪除當btn.expand_bio點擊時顯示bio.read_more。

唯一的問題是全部的bio.read_more divs顯示？我只想要與之相關的擴展。誰能幫忙？

$(document).ready(function(){ 

    $(".bio.read_more").hide(); 

    $(".btn.expand_bio").click(function(e){ 
    e.preventDefault(); 
    $(".bio.read_more").toggle(); 
    }); 

}); 

（更新）添加了HTML

<div class="bio intro"> 
    <p>Intro paragraph</p> 
    <a class="btn expand_bio" href="#">Read more</a> 
    </div> 
    <div class="bio read_more"> 
    <p>Expanded text here</p> 
    </div> 
    </div> 

Answer 1

使用this作爲參考元件被點擊。

$(document).ready(function() { 
    $(".bio.read_more").hide(); 
    $(".btn.expand_bio").click(function(e) { 
     e.preventDefault(); 
     $(this).closest('.bio.intro').next('.read_more').toggle(); 
    }); 
});