Javascript 如何使toggleClass仅应用于单击的元素

我正在尽我最大的努力来表达这个，这个可能已经存在了，但我不确定找到它所需要的语言

我有一个手风琴，它被一个列表输出。我试图让它成为这样，当列表项被点击时，图标就会动画

$('[data-toggle=collapse]').on('click', function() {
        $('[data-toggle=collapse]').not(this).removeClass('collapsed');
        $('.plus-minus-toggle').toggleClass('collapsed');
    });

我试图通过谷歌搜索来实现这一点，但是如果我用

[data toggle=collapse]

点击任何列表项，然后用

点击所有div。加减切换

切换

折叠

。我只想要

[data toggle=collapse]

我点击按钮切换

collapse

。举个例子，我不知道该如何把它挑出来

更新

我有一段类似的相关代码，是否可以将它们绑定到我的OP中？还是应该保持分离

$(document).on('click', '[data-toggle=collapse] .fa', function(e) {
        e.stopPropagation();
    });

更新#2

<div class="tab-pane active" id="tab2">
  <div class="panel-group" id="help-accordion-2">
    <div class="panel panel-default panel-help">
      <a href="#post-surgery-add-case-add-cases-work" data-toggle="collapse">
        <div class="panel-heading">
          <h2>What is an add-on case? How to add-on cases work?</h2>
          <div class="plus-minus-toggle collapsed"></div>
        </div>
      </a>

      <div id="post-surgery-add-case-add-cases-work" class="collapse">
        <div class="panel-body">
          <p>Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
</div>

这段代码实现了我想要的功能。

如下所示：

$('[data-toggle=collapse]').on('click', function() {
    $('[data-toggle=collapse]').not(this).removeClass('collapsed');
    $(this).toggleClass('collapsed');
});

---

希望这能有所帮助。

这个怎么知道是div崩溃了呢

[data toggle=collapse]

没有要切换的类。也许第二行需要

。加减切换

？您有正在使用的HTML吗这将切换已单击且具有数据切换=折叠的项目。“加减切换”元素是被单击项的子元素吗？我看到您已经使用了.find（）函数。如果你还有什么需要帮助的，请告诉我。

$('[data-toggle=collapse]').on('click', function(e) {
        $('[data-toggle=collapse]').not(this).removeClass('collapsed');
        $('.plus-minus-toggle').toggleClass('collapsed');
        e.stopPropogation();
});

$('[data-toggle=collapse]').on('click', function(e) {
        $('[data-toggle=collapse]').not(this).removeClass('collapsed');
        $('.plus-minus-toggle').toggleClass('collapsed');
        e.stopPropogation();
});