Jquery – 单击链接时显示当前div并隐藏其他div

当我点击显示/隐藏链接时，它会显示两个div，我希望它只显示其相关的div。 我怎样才能做到这一点？ 我不想为每个div使用ID。

的jsfiddle

 Show/hide 
 First div. 
 
 
 
 Show/hide 
 Second div. 
  

和

 $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); }); 

Answer 1

进入点击function，将您的代码更改为：

 $(".slidingDiv").slideUp(); $(this).next().slideToggle(); 

https://jsfiddle.net/pzc8vy9b/6/

Answer 2

通过更改使用next（）

 $(".slidingDiv").slideToggle(); 

至

 $(this).next(".slidingDiv").slideToggle(); 

 $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(this).next(".slidingDiv").slideToggle(); }); }); 

 .slidingDiv { height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .show_hide { display:none; } 

  
 Show/hide 
 First div. 
 
 
 
 Show/hide 
 Second div. 
  

Answer 3

只需使用next（） 。

https://jsfiddle.net/pzc8vy9b/4/

 
 Show/hide 
 First div. 
 
 
 
 Show/hide 
 Second div. 
  

---

 $(document).ready(function(){ $('.show_hide').click(function(){ $(this).next().slideToggle(); }); }); 

---

 .slidingDiv { height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; display: none; } 

Answer 4

试试这个

 $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(this).next(".slidingDiv").slideToggle(); }); });