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

Answer 2

您需要单独处理每个div中的按钮

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

Answer 3

这样做。您必须使用 this 才能只切换一个项目。

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

Answer 4

试试这个。

$( ".open" ).click(function() {
    $(this).next(".ranch").slideToggle( "slow", function() {
    // Animation complete.
  });
});

.content{
  width:400px;
  background-color:orange
}


.ranch{
  display:none;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

隐藏并显示1次单击Jquery

4 个答案: