如何使用slideToggle on仅点击被点击元素的子项

Question

我有2个div，里面有2个div

<div id="div1" class="div">
    <div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
</div>

<div id="div2" class="div">
    <div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
</div>

我的JavaScript是

$(document).ready(function(){
    $(".flip").click(function(){
         $( ".panel" ).children( ".panel" ).slideToggle("slow");
    });
});

该示例位于https://jsfiddle.net/msjaasfk/2/

所以我希望当点击一个.flip时，只显示同一个div中的.panel ，而不是所有显示.panel类的div。

Answer 1

您正在选择并切换所有 .panel元素。 修改代码，以便只切换与单击元素对应的.panel元素：

更新的示例

$(".flip").click(function() {
  $(this).next().slideToggle("slow");
});

• this是对单击的.flip元素的引用
• .next()方法将选择下一个兄弟元素（在本例中为.panel ）。

作为旁注，您还可以修改代码，以便一次只打开一个面板：

更新的示例

 $(".flip").click(function() { $('.panel').not($(this).next()).slideUp(); $(this).next().slideToggle("slow"); }); 

 .panel, .flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } .panel { padding: 50px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> <div id="div2" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> 

Answer 2

在您的上下文中， .panel将选择panel类的所有元素。 在.flip元素的click事件中，您可以使用jQuery的.next（）仅选择下一个.panel您可能想要指定.panel选择器，以防div中的HTML结构发生更改

$(this).next(".panel").slideToggle("slow");

这是完整的例子

 $(document).ready(function() { $(".flip").click(function() { $(this).next(".panel").slideToggle("slow"); }); }); 

 .panel, .flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } .panel { padding: 50px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> <div id="div2" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div>