Jquery 在一个页面上使用多个幻灯片切换

我使用slideToggle创建了一个“下拉列表”，在单击链接时显示内容

单击“查看开放时间”时，将显示一个显示时间的div

问题是，在我的页面上，有多个不同的位置和不同的打开时间。因此，通过使用一个函数，单击链接将打开所有隐藏的div。我怎样才能将一个链接链接到它的相关div

HTML:

---

您的代码的问题是。。您正在使用class

openingtimes

选择所有div并使用slideToggle。。由于b浏览器通过调用

openingtimes

找到了两个此项。。它滑动两个div

您可以使用

$（this）

引用获取单击的元素，并找到该块的div

openingTimes

，然后滑动它

试试这个

$(this).parent().find(".openingTimes").slideToggle("slow");

或

您要切换的

元素是处理

单击事件的
的下一个同级元素，因此您可以使用一些简单的DOM遍历来获取对下一个元素的引用：

$('.timeList a').click(function(e) {
    $(this).next().slideToggle('slow');
});

在函数
中，this
是锚定的实际DOM元素，
$（this）
创建一个包含该元素的jQuery对象，
。next（）
获取DOM中紧跟其后的元素，然后显然
。slideToggle（'slow'）
执行实际的切换

您可以选择将选择器传递给
.next（）
，以仅选择下一个元素（如果它也与选择器匹配）。如果在每个<代码> 元素中有多个锚，那么您可能需要考虑使用：

$(this).next('.openingTimes').slideToggle('slow');

相反。尽管对于您显示的HTML，这是不必要的。
尝试下面给出的代码

$(".timeList a").click(function () {
    $(this).parent('.timeList').children(".openingTimes").slideToggle("slow");
});

打败我吧。。。！我得到了确切的实现
$('.timeList a').click(function(e) {
    $(this).next().slideToggle('slow');
});

$(this).next('.openingTimes').slideToggle('slow');

$(".timeList a").click(function () {
    $(this).parent('.timeList').children(".openingTimes").slideToggle("slow");
});