使用jQuery显示第一个先前的可折叠div

Question

使用jQuery执行以下操作的最佳（通用）方法是什么？点击.story-collapse中的主播时，我想在其所在的.collapse中切换div article。此article在页面上重复多次，当然只有当前的人应该切换。

<article>
    <div class="story-body clearfix">
        <div class="story-paragraph">
            <p>This is shown</p>
            <div class="collapse">
                <p>This is hidden</p>
            </div>
        </div>
    </div>
    <div class="story-collapse"><a class="icon icon-icon-arrow-up" href="#"></a></div>
</article>

Answer 1

您可以使用：

$('.story-collapse').click(function(){
  $(this).closest('article').find('.collapse').toggle();
        // or
  $(this).parent().prev().find('.collapse').toggle();
});

Answer 2

使用closest()向上导航至article和find()以获取.collapse

$(this).closest('article').find('.collapse').toggle();

$('.story-collapse a').click(function() {
  $(this).closest('article').find('.collapse').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>

使用has()

或

$('article').has(this).find('.collapse').toggle();

$('.story-collapse a').click(function() {
  $('article').has(this).find('.collapse').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>
<article>
  <div class="story-body clearfix">
    <div class="story-paragraph">
      <p>This is shown</p>
      <div class="collapse">
        <p>This is hidden</p>
      </div>
    </div>
  </div>
  <div class="story-collapse">
    <a class="icon icon-icon-arrow-up" href="#">toggle</a>
  </div>
</article>

Answer 3

您可以使用closest：

$('.story-collapse').on('click',function(){
   $(this).closest('article').find('.collapse').toggle();
});

或者，您可以使用prev然后使用find正确的元素：

$(this).prev().find('.collapse').toggle();

Answer 4

父母将选择以前的所有DOM元素，在获取文章元素后，我们可以使用.collapse方法找到.find()类元素

$(".story-collapse a").click(function(){
    $(this).parents("article").find(".collapse").toggle();
});