如何实现点击时仅切换单个triangle类，避免批量切换？

问题出在你当前的代码里，$('.triangle')会选中页面上所有带有.triangle类的元素，所以点击任何一个Toggle时，所有三角形都会跟着切换。要只操作当前点击元素对应的三角形，关键是用$(this)指代被点击的那个.Toggle元素，然后通过DOM遍历方法定位到它关联的.triangle。

根据你的HTML结构，你可以选择以下几种合适的写法：

1. 如果三角形是Toggle的兄弟元素（同一父容器下） #

比如你的HTML结构是这样的：

<div class="group">
  <span class="Toggle">click me 1</span>
  <span class="triangle">▲</span>
</div>
<div class="group">
  <span class="Toggle">click me 2</span>
  <span class="triangle">▲</span>
</div>

修改JS代码为：

$('body').on('click', '.Toggle', function () {
  // 找到当前点击Toggle的兄弟元素中的.triangle
  $(this).siblings('.triangle').toggleClass('expanded');
});

2. 如果三角形是Toggle的子元素 #

如果你的三角形嵌套在Toggle里面：

<span class="Toggle">
  click me 1
  <span class="triangle">▲</span>
</span>

就用find()方法：

$('body').on('click', '.Toggle', function () {
  // 查找当前点击Toggle内部的.triangle
  $(this).find('.triangle').toggleClass('expanded');
});

3. 如果三角形是Toggle的下一个相邻元素 #

如果Toggle和三角形是紧挨着的兄弟，且三角形在Toggle后面：

<span class="Toggle">click me 1</span>
<span class="triangle">▲</span>

可以用next()方法更精准：

$('body').on('click', '.Toggle', function () {
  // 选中当前点击Toggle的下一个.triangle元素
  $(this).next('.triangle').toggleClass('expanded');
});

核心思路就是：不要全局选中所有.triangle，而是基于当前点击的Toggle，定位到它对应的那个三角形元素，这样就能实现点击哪个Toggle，只切换对应的三角形啦。

内容的提问来源于stack exchange，提问作者maryjane