Таргетинг на определенный косвенный родительский класс

Question

У меня есть 2 (или более) дивов, называемых hidden_block.Я не могу изменить HTML, и мне нужно использовать jQuery, хотя я только начал изучать javascript, но у меня нет выбора по этому вопросу.

Мне бы хотелось, чтобы при нажатии на slider_head отображался блок hidden_content чуть ниже, но только hidden_content из задействованного hidden_block div.

Мой код и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 со строкой.В любом случае, похоже, что это опечатка, так как я предполагаю, что > должен быть потомком, а не оператором больше.Также обратите внимание, что в некоторых случаях в 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>