Javascript 仅切换给定div中的内容

我有一个关于按下按钮后使用切换功能的问题。我有以下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>

但这是行不通的。感谢您的帮助

---

你的想法是对的；您需要使用

this

关键字来引用引发事件的元素并查找它的相关

。展开
和
。折叠
元素，但是
next（）
查找同级元素，而您需要检索的元素是子元素，因此需要使用
find（）
：

使用
find（）
如下所示

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

你快到了！
find（）是你的朋友。与$（this）结合使用时，它将搜索符合条件的子节点

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

他们试图研究你的问题，得到了这个有用的链接。您可以按如下方式使用它：

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

$（.expand.collapse”）.toggle（）
这将对所有具有类
展开
和
折叠
的元素应用
切换
，而不考虑您单击的
.navigation
div

改为

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

您可以阅读有关
$（this）
您必须指定这些类的容器div，您只需使用
$（“.expand.collapse”，$（this））
：


$（函数（）{
$（'.navigation'）。单击（函数（）{
$（“.expand.collapse”，$（this））.toggle（）；
});
});
.navigation{
最小宽度：30px；
最小高度：20px；
背景：蓝色；
}

扩大
崩溃
扩大
崩溃
感谢您快速清晰的回答！这真的帮助了我。我以为我很接近，但你的解释把一切都说清楚了。非常感谢。请注意，这不适用于
同级（）
获取同级元素，而
.collapse
和
.expand
是子元素。
$(function () {
            $('.navigation').click(function () {                                
                $(this).find(".expand, .collapse").toggle();
            });
});

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

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