使单击事件只影响父类的子类？

Question

我正试图为我的网站创建一个可扩展的搜索过滤器列表。每个类别都有子类别。我使用的引导带，所以我选择使用自定义版本的BS手风琴。我有它，所以当您单击“父”类别时，父项旁边的字体"plus“图标将变成”减号“，显示折叠的w列表作为下一个操作(通常所见)。

例如，：

+Computers

+Phones

-Tablets

   Android Tablets

   Windows Tablets

   Apple iPads

问题是，如果你按一下平板电脑来展开它，就像我上面的例子所示，然后再点击它来折叠平板电脑的列表，它会把所有其他父母手风琴列表的图标都切换到减号，即使它们被折叠了。

这里是我的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')
});

Answer 2

尝试在li上切换类，并根据活动类的不同将li: with与内容："-“或内容："+”进行样式设置。

Answer 3

我认为在您提供的代码中，而不是：

$('.categories').find('i').addClass('fa-plus-square-o');

你应该使用：

$(this).find('i').addClass('fa-plus-square-o');

你可以这样做：

jQuery:

$('.categories').on('click', function() {
    var elm = $(this).find('.subcategories');
    var hasClass = elm.hasClass('activeSub');
    $('.activeSub').removeClass('activeSub');
    if(!hasClass)
        elm.addClass('activeSub');
});

JSFIDDLE