包含Div的部分的jQuery选择器

Question

当单击该部分中的h2元素时，我想显示该部分中的所有字段。示例：当用户单击“联系信息”时，将显示“联系信息”标题下方的3个表单输入（字段）。

我的所有表单字段都隐藏了以下css：

div.field {
  display:none;
}

这是我正在使用的jQuery：

$('section > h2').click(function(){
  $('.field').toggle();
});

这是我的HTML：

<section>
  <h2>Contact Information</h2>
  <div class="field>
    // form input
  </div>
  <div class="field>
    // form input
  </div>
  <div class="field>
    // form input
  </div>
</section>

<section>
  <h2>Address</h2>
  <div class="field>
    // form input
  </div>
  <div class="field>
    // form input
  </div>
  <div class="field>
    // form input
  </div>
</section>

这里发生的是显示所有字段 - 而不仅仅是与点击的h2相同的部分。如何仅切换与单击的h2相同的部分中的字段的可见性？

提前致谢。

Answer 1

返回到该部分，然后找到该特定部分中的所有.field元素

$('section > h2').on('click', function(){
  $(this).closest('section').find('.field').toggle();
});

div.field {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <h2>Contact Information</h2>
  <div class="field">
    form input 1
  </div>
  <div class="field">
    form input 2
  </div>
  <div class="field">
    form input 3
  </div>
</section>

<section>
  <h2>Address</h2>
  <div class="field">
    form input 4
  </div>
  <div class="field">
    form input 5
  </div>
  <div class="field">
    form input 6
  </div>
</section>

只要您保持HTML原样，siblings也可以正常使用

$(this).siblings('.field').toggle()

但它更具体，不适用于嵌套元素

Answer 2

$('section > h2').click(function(){
  $(this).parent().find('.field').toggle();
});

div.field {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <h2>Contact Information</h2>
  <div class="field">
    // form input
  </div>
  <div class="field">
    // form input
  </div>
  <div class="field">
     //form input
  </div>
</section>

<section>
  <h2>Address</h2>
  <div class="field">
    // form input
  </div>
  <div class="field">
    // form input
  </div>
  <div class="field">
    // form input
  </div>
</section>

Answer 3

因为您的字段div位于h2元素之后，您可以使用.nextAll('.field')

date

$('section > h2').click(function () {
    $(this).nextAll('.field').toggle();
});

div.field {
    display: none;
}