Question

我有2个（或更多）div，称为hidden_block。尽管我刚刚开始学习JavaScript，但是我无法更改HTML并且必须使用jQuery，但是我对此没有任何选择。

我想当您单击slider_head时显示下面的hidden_content块，但只显示涉及的hidden_content格中的hidden_block。

我的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对象与字符串进行比较。无论如何，这似乎是一个错字，因为我假设>应该是后代选择器，而不是大于运算符。还要注意，在某些情况下，在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>

定位到特定的间接父类

1 个答案: