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");
    });


});

关于代码笔的示例（1）： http://codepen.io/vms/pen/vLXEax

只要每页只有一个切换，就没有问题。然而，如果在一个页面中有几次切换，所有内容都会同时切换/显示/隐藏，您可以在此处看到我放在一起的“胡萝卜/辣椒/苹果”示例：

<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");
    });


});

关于代码笔的示例（2）： http://codepen.io/vms/pen/bEwNjM

我可以编写尽可能多的脚本作为我需要构建的切换器（一个用于苹果，一个用于辣椒等等），但它似乎不是一个实用的，易于操作的解决方案，有许多em。 / p>

因此，鉴于我无法更改HTML（除了添加类），也无法使用数据属性，当我点击“苹果”标题时，是否有一种简单/正确的方式来切换/显示/隐藏苹果（等等）与其他水果一起检查班级？

我在jQuery方面缺乏经验，这基本上是“我可以去的”所以......在这里我要求一些帮助：＆lt;

提前致谢！

Answer 1

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

获取每个元素的所有后续兄弟，但不包括由传递的选择器，DOM节点或jQuery对象匹配的元素。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

基于类

1 个答案: