javascript - 仅切换给定 div 中的内容

Question

我有一个关于按下按钮后使用切换功能的问题。我有以下 jQuery 代码:

$(function () {
    $('.navigation').click(function () {                                
        $(".expand, .collapse").toggle();
    });
});

这与以下 HTML 完美结合:

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

但是每当我有这种 HTML 格式时:

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

切换应用于两个容器，这是合乎逻辑的，但不是我们想要的。我怎么能只触发按下的导航按钮的 sibling ？

我试过类似的方法:

$(this).next(".expand, .collapse").toggle();

但这行不通。任何帮助表示赞赏!

DEMO HERE

Answer 1

你的想法是对的；您需要使用 this 关键字来引用引发事件的元素并找到它相关的 .expand 和 .collapse 元素，但是 next() 查找兄弟元素，而您需要检索的元素是子元素，因此您需要使用 find():

$(function () {
    $('.navigation').click(function () {                                
        $(this).find(".expand, .collapse").toggle();
    });
});

Updated fiddle