隱藏並顯示1次點擊jquery

我現在得到的效果是顯示div段落。但是當我添加另一個div時，就像所有div顯示段落一樣。如何通過點擊1來控制這個？隱藏並顯示1次點擊jquery

你的幫助真的很感謝。

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>

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

DEMO

來源

2016-05-26 Fiido93

您正在使用$('.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

來源

2016-05-26 02:42:08 user6383968

非常感謝你。這是我想要的效果！ – Fiido93

2分鐘後我可以接受這個答案！ – Fiido93

你需要在每個格設置單獨

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

來源

2016-05-26 02:45:05 Gerard

謝謝gerard！ – Fiido93

處理按鈕這將做到這一點。您必須使用此才能切換一個項目。

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

來源

2016-05-26 02:50:22 JustinasT

試試這個。

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

來源

2016-05-26 03:08:58

隱藏並顯示1次點擊jquery

回答

相關問題