如何将Jquery slideToggle（）应用于具有相同类的多个div？

$(document).ready(function() { $(".main_box").click(function() { $(".sliding_box").slideToggle(); }); }); 

 div.wrapper { width: 300px; float: left; margin-right: 10px; } div.main_box { width: 300px; height: 30px; background-color: #FF0000; } div.sliding_box { width: 300px; height: 300px; background-color: #0000FF; } 

当我点击“main_box”div时，“sliding_box”div都会上升。 我想只需要点击第一个“main_box”div后第一个“sliding_box”div就可以了。

有谁知道怎么做？

Answer 1

你必须定位$(this).siblings('.sliding_box')而不是$(".sliding_box") 。

 $(document).ready(function() { $(".main_box").click(function() { $(this).siblings('.sliding_box').slideToggle(); }); }); 

 div.wrapper { width: 300px; float: left; margin-right: 10px; } div.main_box { width: 300px; height: 30px; background-color: #FF0000; } div.sliding_box { width: 300px; height: 300px; background-color: #0000FF; }