以特定的间接父类为目标答案

【问题标题】：Target a specific indirect parent class以特定的间接父类为目标
【发布时间】：2019-05-17 14:13:10
【问题描述】：

我有 2 个（或更多）名为 hidden_block 的 div。我无法更改 HTML，我必须使用 jQuery，即使我刚刚开始学习 javascript，但我对此没有任何选择。

我希望当您单击 slider_head 时，会显示正下方的 hidden_content 块，但仅显示相关 hidden_block div 中的 hidden_content。

我的 codepen 和 html/jquery 代码： https://codepen.io/HollowKnight/pen/bOEzay

$(function slideBlock() {
  $('.hidden_content').hide();
  $('.slider_head').on("click", function() {
    var sliderhead = $(this);
    var hiddenblock = $(sliderhead).parent();
    if ((hiddenblock > '.hidden_content').is(':hidden')) {
      $(hiddenblock > '.hidden_content').slideDown(500);
    } else {
      $(hiddenblock > '.hidden_content').slideUp(1000);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden_block">
  <span class="slider_head">PARTIE 1 TEST</span>
  <div class="hidden_content">
    <p>test test test</p>
  </div>
</div>

<div class="hidden_block">
  <span class="slider_head">PARTIE 2</span>
  <div class="hidden_content">
    <p>test2 test2 test2</p>
  </div>
</div>

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

您问题中的代码存在缺陷，因为您将 jQuery 对象与字符串进行比较。无论如何，这似乎是一个错字，因为我认为 > 应该是后代选择器，而不是大于运算符。另请注意，在 CodePen 的某些情况下（似乎与问题有不同的代码），您选择的是 jQuery 对象，然后再次将其包装在 jQuery 对象中，这应该避免。

要执行您需要的操作，您只需选择兄弟.hidden_content 并根据需要隐藏/显示它：

$(function() {
  $(".hidden_content").hide();
  $(".slider_head").on("click", function() {
    var $sliderhead = $(this);
    var $hiddenblock = $sliderhead.siblings('.hidden_content');

    if ($hiddenblock.is(":hidden")) {
      $hiddenblock.slideDown(500);
    } else {
      $hiddenblock.slideUp(1000);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden_block">
  <span class="slider_head">PARTIE 1 TEST</span>
  <div class="hidden_content">
    <p>test test test</p>
  </div>
</div>

<div class="hidden_block">
  <span class="slider_head">PARTIE 2</span>
  <div class="hidden_content">
    <p>test2 test2 test2</p>
  </div>
</div>

另请注意，这可以进一步简化为使用slideToggle()，而不是在显示之前检查元素的状态：

$(function() {
  $(".hidden_content").hide();
  $(".slider_head").on("click", function() {
    $(this).siblings('.hidden_content').slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden_block">
  <span class="slider_head">PARTIE 1 TEST</span>
  <div class="hidden_content">
    <p>test test test</p>
  </div>
</div>

<div class="hidden_block">
  <span class="slider_head">PARTIE 2</span>
  <div class="hidden_content">
    <p>test2 test2 test2</p>
  </div>
</div>

【讨论】：

谢谢你，这正是我想要的，谢谢你的解释。
没问题，很高兴为您提供帮助