Jquery方法选择，用于移动到下一个父子

Jquery method selection for moving to next parents child

本文关键字：下一个 父子 移动 用于 方法 选择 Jquery      更新时间：2023-09-26

我很难找到正确的方法来定位正确的元素。

.HTML

 <div class="side-blog">
   <div class="side-nav-block-item">
      <h4>Click me</h4>
  </div>
  <div class="side-nav-block-item">
     Stuff I want to Slide up
  </div>
</div>

jQuery是我正在使用的。我知道我需要替换父级或添加到它以移回树下，我已经尝试了closest（）和next（），但无法让它工作。

$('.side-blog h4').click(function() {
  if ($(this).hasClass('on')) {
    $(this).toggleClass('on');
    $(this).parent('.side-nav-block-item').slideUp('normal');
  } else {
    $(this).toggleClass('on');
    $(this).parent('.side-nav-block-item').slideDown('normal');
  }
});

尝试

var $this = $(this);
$this.parent('.side-nav-block-item').next()[$(this).hasClass('on') ? 'slideUp' : 'slideDown']('normal');
$this.toggleClass('on');

演示：小提琴

这将

为你工作

使用 next（） 将得到结果。

$('.side-blog h4').click(function() {
if ($(this).hasClass('on')) {
    $(this).toggleClass('on');
        $(this).parent('.side-nav-block-item').next().slideDown('normal');
} else {
    $(this).toggleClass('on');
    $(this).parent('.side-nav-block-item').next().slideUp('normal');
    }
});
相关文章：