javascript - jQuery : toggle class opening all class

Question

我有以下代码，我已经解决了很多 SO 问题，但我仍然无法让它运行。

我想使用toggle 但问题 是它正在打开所有与此相关的类。我想要的是只切换被点击的类.

我已经尝试过 e.preventDefault 、e.stopPropagation(); 和 return false。但它们都不适合我。

注意 我不知道上面提到的三个的用途。我在结束而不是开始时使用它们。

$(".read").click(function(e){
        //e.preventDefault();
        $(".expand").toggle();
		return false;
    });

.expand{display:none;background:#000;color:white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Answer 1

$(".expand") 返回具有类 .expand 的所有元素的问题，但您只需要获取一个元素。你可以这样做

$(".read").click(function(e){
  $(this).next('.expand').toggle();
  return false;
});

演示:http://jsbin.com/marale/1/edit?html,js,output