Question

我在一个站点上有一个页面，其中包含多个FAQ问题，当您单击“ +”时，会出现slideToggle的答案。我遇到了一个问题，即单击时会打开所有问题的所有答案，我希望能够一次切换一个。

有没有办法使用jQuery中的“父”“子”选择器来做到这一点？

HTML：

                <div class="main-slide">
                    <div class="main-slide-title">
                        <p>One-time Close Purchase/Construction Loans</p>
                    </div>
                    <div class="main-slide-plus">
                        <p>+</p>
                    </div>
                </div>
                <div class="sub-slide default-hidden">
                    <ul>
                        <li>Finance the construction</li>
                        <li>Purchase of lot</li>
                        <li>Permanent loan</li>
                        <li>FHA, and VA are available</li>
                    </ul>
                </div>
            </div>

jQuery：

$(".main-slide-plus").click(function () {
  $(".sub-slide").slideToggle(500);
});

Answer 1

从您提供的HTML片段中可以，您可以获取父项main-slide，然后切换类为sub-slide的兄弟姐妹

类似

$(".main-slide-plus").click(function () {
  $(this).parents(".main-slide").sibilings(".sub-slide").slideToggle(500);
});

Answer 2

如果这是您为手风琴重复的结构，则需要转到父级，然后找到下一个.subslide元素。遵循以下原则：

$(".main-slide-plus").click(function () { 
   $(this).parent().next(".sub-slide").slideToggle(500); 
});

jQuery FAQ手风琴一次只能打开一个

2 个答案: