javascript - 隐藏和显示 1 次单击 Jquery

Question

我现在得到的效果，它显示了 div 段落。但是当我添加另一个 div 时，就像所有 div 一起显示段落一样。一次点击1如何控制？

非常感谢您的帮助。

HTML

<div class="content">
  <button class="open">See More</button>
  <p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
 </div>
  <div class="content">
  <button class="open">See More</button>
  <p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
 </div>

JS

 $('.open').on('click',function(event){
 $('.ranch').toggle();
 });

DEMO

Answer 1

您正在使用 $('.ranch').toggle(); 因此您选择了所有具有 ranch 类的段落，因此当您单击时所有段落都会切换在上面。快速解决方法是将行更改为 $(this).siblings('.ranch').toggle();

最终的 JavaScript 将是

 $('.open').on('click',function(event){
    $(this).siblings('.ranch').toggle();
 });

JSBin:http://jsbin.com/fiwosigike/1/edit?html,css,js,output