Question

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

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

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

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

您的代码存在的问题是..您正在使用类openingtimes选择所有div并使用slideToggle ..因为浏览器通过调用openingtimes找到两个这样的..它会滑动两个div ...

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

试试这个

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

OR

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

working fiddle here

Answer 3

尝试下面给出的代码

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

在一个页面上使用多个slideToggle

3 个答案: