Javascript 如何滑动切换“仅单击”已单击元素的子元素

我有两个div，里面有两个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>

例子就在这里

---

因此，我希望当单击一个

.flip

时，在同一个div中仅显示

.panel

，而不是所有具有

.panel

类的div。

您正在选择和切换所有

.panel

元素。修改代码，以便仅切换与单击的元素对应的

.panel

元素：

• 此

  是对单击的

  .flip

  元素的引用
• 将选择下一个同级元素（在本例中为

  .panel

  ）

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

$（“.flip”）。单击（函数（）{
$（'.panel'）.not（$（this.next（））.slideUp（）；
$（this.next（）.slideToggle（“slow”）；
});
.panel，
.翻转{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
.小组{
填充：50px；
显示：无；
}

单击以向下滑动面板
你好，世界！
单击以向下滑动面板
你好，世界！
在您的上下文中，
.panel
将使用
panel
类选择所有元素。在
.flip
元素的单击事件中，您可以使用jQuery只选择下一个
.panel
如果div中的HTML结构发生变化，您可能需要指定
.panel
选择器

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

下面是完整的示例


$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（此）.next（.panel”）.slideToggle（“慢”）；
});
});
.panel，
.翻转{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
.小组{
填充：50px；
显示：无；
}

单击以向下滑动面板
你好，世界！
单击以向下滑动面板
你好，世界！

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

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