jQuery 切换基于 class

Question

我需要切换一些面板，为此，我编写了一个小脚本，例如：

<div>
<div class="ftd ftd_title"><strong>This is the title</strong></div>
<div class="ftd ftd_field">This is a toggle div</div>
<div class="ftd ftd_field">This is a toggle div</div>
<div class="ftd ftd_field">This is a toggle div</div>
</div>

jQuery(document).ready(function() {

    $('.ftd_field').hide();
    $(".ftd_title").click(function(){
        $(".ftd_field").slideToggle("slow");
    });


});

Codepen 上的示例 (1)： http://codepen.io/vms/pen/vLXEax

只要我每页只有一个开关，就没有问题。然而，如果在一页中进行多次切换，所有内容都会同时变为 toggled/shown/hidden，正如您在此处看到的 "carrots/peppers/apples" 我放在一起的示例：

<div class="ftd ftd_carrots ftd_title"><strong>Carrots</strong></div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>


<div class="ftd ftd_peppers ftd_title"><strong>Peppers</strong></div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>

<div class="ftd ftd_carrots ftd_title"><strong>Apples</strong></div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>

jQuery(document).ready(function() {

    $('.ftd_field').hide();
    $(".ftd_title").click(function(){
        $(".ftd_field").slideToggle("slow");
    });


});

Codepen 上的示例 (2)： http://codepen.io/vms/pen/bEwNjM

我可以编写与我需要构建的开关一样多的脚本（一个用于苹果，一个用于辣椒，等等），但它看起来既不实用也不易于维护.

所以，鉴于我不能更改 HTML（除了添加 classes），也不能使用数据属性，是否有 easy/correct 到 toggle/show/hide 的方法当我通过检查 class?

单击 "Apples" 标题（以及其他水果）时的苹果

我在 jQuery 方面经验不足，这基本上是 "as far as I can go" 所以...我在这里寻求一些帮助：<

提前致谢！

Answer 1

您需要使用 .nextUntil(".ftd_title") 来识别所有兄弟元素，即 ftd_field 直到找到下一个 ftd_title

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

 $(".ftd_title").click(function() {
    $(this).nextUntil(".ftd_title").filter('.ftd_field').slideToggle("slow");
 });

jQuery(document).ready(function() {

  $('.ftd_field').hide();
  $(".ftd_title").click(function() {
    $(this).nextUntil(".ftd_title").filter('.ftd_field').slideToggle("slow");
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ftd ftd_carrots ftd_title"><strong>Carrots</strong>
</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>


<div class="ftd ftd_peppers ftd_title"><strong>Peppers</strong>
</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>

<div class="ftd ftd_carrots ftd_title"><strong>Apples</strong>
</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div>Yahooooooooooo</div>

jQuery 切换基于 class

jQuery toggle based on class

jquery

toggle