Question

HTML：

<div class="block-1">
  <p>
    <a class="more-info">Learn More</a>
  </p>
  <div class="extra-bits">
  <p>
    Yadda Yadda Yadda
  </p>
  </div>
</div>
<div class="block-2">
  <p>
    <a class="more-info">Learn More</a>
  </p>
  <div class="extra-bits">
    <p>
      Yadda Yadda Yadda
    </p>
  </div>
</div>

JS：

$('.more-info').click(function() {
  $('.extra-bits').slideToggle();
});

基本上，我需要“了解更多”链接，只定位div.extra-bits的下一个实例。

我尝试使用

$(this).next.slideToggle();

以及

$(this).nextUntil('.more-info', '.extra-bits').slideToggle();

但我找不到任何符合我想要的东西。

有什么想法吗？

Answer 1

您必须使用parent()来提升树中的关卡，并在div附近找到next() .extra-bits来执行slideToggle

$('.more-info').click(function() {

   $(this).parent().next(".extra-bits").slideToggle();
});

.extra-bits{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-1">
  <p>
    <a class="more-info">Learn More</a>
  </p>
  <div class="extra-bits">
    <p>
      Yadda Yadda Yadda
    </p>
  </div>
</div>
<div class="block-2">
  <p>
    <a class="more-info">Learn More</a>
  </p>
  <div class="extra-bits">
    <p>
      Yadda Yadda Yadda
    </p>
  </div>
</div>

Answer 2

在这种情况下，您可以使用.find()。看看小提琴：https://jsfiddle.net/dkxmhs5v/3/

$('.more-info').click(function() {
    $(this).parents('div').find('.extra-bits').slideToggle();
});

Answer 3

你可以这样做：

$('.more-info').click(function() {
    $(this).parent("p").next('.extra-bits').slideToggle();
});

获取父p，然后获取下一个额外位

https://jsfiddle.net/dkxmhs5v/2/

Answer 4

你可以先走到树上找到兄弟姐妹：

$('.more-info').click(function() {
    $(this).parents().siblings('.extra-bits').slideToggle();
});

jQuery - 使用类的按钮来定位下一个div类（非兄弟）

4 个答案: