顯示隱藏/切換個人信息不能正常工作

Question

我有以下代碼，當我點擊閱讀時，當前會打開所有的信息。我怎樣才能讓它們單獨打開？

$(document).ready(function() { 


    $(".readmore-content").hide(); 
    $(".read-more").click(function(e) { 
     $(".readmore-content").toggle("slow"); 
     e.preventDefault(); 
    }); 
}); 

HTML

<div class="result-b"> 
    <h4> lorem ipsum </h4> 
    <p>lorem ip sum soem <a href= "#" class="read-more">Read more</a> </p> 
    <div class="readmore-content"> 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum 
    </div> 

</div> 
<div class="result-b"> 
    <h4> lorem ipsum </h4> 
    <p>lorem ip sum soem <a href= "#" class="read-more">Read more</a> </p> 
    <div class="readmore-content"> 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum 
    </div> 

</div> 

Answer 1

1. 使用與$(this)
2. 度過當前元素上下文高達父p元素與parent()
3. 導航一起同級next()

$(document).ready(function() { 
 
    $(".readmore-content").hide(); 
 
    $(".read-more").click(function(e) { 
 
    $(this).parent('p').next(".readmore-content").toggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="result-b"> 
 
    <h4> lorem ipsum </h4> 
 
    <p>lorem ip sum soem <a href="#" class="read-more">Read more</a> 
 
    </p> 
 
    <div class="readmore-content"> 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    </div> 
 

 
</div> 
 
<div class="result-b"> 
 
    <h4> lorem ipsum </h4> 
 
    <p>lorem ip sum soem <a href="#" class="read-more">Read more</a> 
 
    </p> 
 
    <div class="readmore-content"> 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    </div> 
 

 
</div>