限制切换效果

Question

我把这个jQuery放在一起，当文档准备就绪时，隐藏了div类的bio.read_more。

使用a

删除了e.preventDefault代码的默认行为

点击btn.expand_bio时会显示bio.read_more。

唯一的问题是所有显示bio.read_more div？我只想要与扩展相关的那个。有人可以帮忙吗？

   $(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();
    });
});