javascript - 包含 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()

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