jquery - 在一页上使用多个 slideToggle

Question

我使用 slideToggle 创建了一个“下拉菜单”以在单击链接时显示内容。

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

问题是，在我的页面上有多个不同的位置具有不同的开放时间。因此，通过使用一个功能，单击链接会打开所有隐藏的 div。如何仅将一个链接链接到它的相关 div？

JSFiddle

HTML：

    <div class="timeList">
    <a>See opening times</a>
    <p class="openingTimes" style="display: none;">
    <strong>Mon-Fri</strong>: 7am - 5.30pm<br />
    <strong>Sat</strong>:<br />
    <span class="seasonTimes"><em>Summer</em>: 7.30am - 5.30pm<br />
    </span>
    <span class="seasonTimes"><em>Winter</em>: 8am - 5pm<br />
    </span>
    <span class="seasonTimes"><em>November - March</em>: 8am - 1pm<br />
    </span>
    <strong>Sun</strong>: Closed
    </p>
    </div>
<br /><br />
 <div class="timeList">
    <a>See opening times</a>
    <p class="openingTimes" style="display: none;">
    <strong>Mon-Fri</strong>: 8am - 5.30pm<br />
    <strong>Sat</strong>:<br />
    <span class="seasonTimes"><em>Summer</em>: 90.30am - 5.30pm<br />
    </span>
    <span class="seasonTimes"><em>Winter</em>: 10am - 5pm<br />
    </span>
    <strong>Sun</strong>: 10am - 5.30pm
    </p>
    </div>

jQuery：

$(".timeList a").click(function () {
  $(".openingTimes").slideToggle("slow");
});

Answer 1

<p class="openingTimes">您要切换的元素<a>是处理click事件的下一个兄弟元素，因此您可以使用一些简单的 DOM 遍历来获取对下一个元素的引用：

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

函数内部this是锚点的实际 DOM 元素，$(this)创建一个包含该元素的 jQuery 对象，.next()获取 DOM 中紧随其后的元素，然后显然.slideToggle('slow')进行实际切换。

如果它也匹配选择器，您可以选择将选择器传递.next()给仅选择下一个元素。如果您在每个<div class="timeList">元素中有多个锚点，那么您可能需要考虑使用：

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

反而。尽管使用您显示的 HTML，但这不是必需的。

Answer 2

您的代码的问题是..您选择了所有带有类的divopeningtimes并使用slideToggle..因为bthe浏览器通过调用找到了两个 openingtimes..它滑动了两个div...

您可以使用$(this)引用来获取单击的元素并找到该openingTimes块的 div 并滑动它

试试这个

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

或者

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

在这里工作小提琴

Answer 3

试试下面给出的代码

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