显示hide / toggle indivdualy不工作

Question

我有以下代码，当我点击readmore时，它现在全部打开。我怎样才能让它们单独打开？

$(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>