定位特定的间接父 class

Question

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

我希望当您单击 slider_head 时，会显示正下方的 hidden_content 块，但只会显示相关 hidden_block [=33= 中的 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>

Answer 1

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

要完成您需要的操作，您只需 select 兄弟姐妹 .hidden_content 并根据需要 hide/show 即可：

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

定位特定的间接父 class

Target a specific indirect parent class

jquery

jquery-selectors