javascript - 制作点击事件只影响父类的 child ？

Question

我正在尝试为我的网站创建一个可扩展的搜索过滤器列表。每个类别都有子类别。我正在使用 Bootstrap，所以我选择使用 BS Accordion 的定制版本。我有它，所以当你点击一个“父”类别时，父级旁边的 Font Awesome “加号”图标变成一个“减号”以显示折叠列表作为下一个 Action (如通常所见)。

例如:

+Computers

+Phones

-Tablets

   Android Tablets

   Windows Tablets

   Apple iPads

问题是，如果您单击 Tablets 将其展开(如我上面的示例所示)，然后再次单击它以折叠 tablets 列表，它将切换所有其他父 Accordion 列表的所有图标，并带有一个事件的加号图标负号，即使它们已折叠。

这是我的 jquery:

$('.categories').click(function(){
var collapsed=$(this).find('i').hasClass('fa-plus-square-o');

$('.categories').find('i').removeClass('fa-minus-square-o');

$('.categories').find('i').addClass('fa-plus-square-o');
if(collapsed)
    $(this).find('i').toggleClass('fa-plus-square-o fa-minus-square-o')
});

我觉得必须有比我试图实现它的方式更好的可用解决方案。我可以编写 jquery 来只影响实际被点击的元素，而不必使用大量的 ID 和过多的 jquery 来解释每个 ID 吗？我觉得每个列表的新 ID 可能会变得非常困惑，因为我们可能有 30 多个可扩展列表，更不用说主列表中可能存在子列表的可能性(试图解释任何可能性并使它可扩展，因为这些类别将是动态的而不是硬编码的)像这样:

-Tablets

  -Android Tablets

    +Asus Tablets

    +Nvidia Tablets

    -Nexus Tablets

        Nexus 7"

        Nexus 10"

    +HTC Tablets

Answer 1

为简单起见:

$('.categories').click(function(){
  $(this).toggleClass('fa-plus-square-o').toggleClass('fa-minus-square-o')
});