Question

我正在尝试为我的网站创建一个可扩展的搜索过滤器列表。每个类别都有子类别。我正在使用Bootstrap，所以我选择使用BS手风琴的定制版本。我有它所以当你点击一个“父”类别时，父母旁边的字体真棒“加号”变成了一个“减号”，表示将该列表折叠为下一个动作（如通常所见）。

例如：

+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：样式之前：＆＃34; - ＆＃34;或内容：＆＃34; +＆＃34;取决于活跃的班级。

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

制作点击事件只影响父类的孩子？

3 个答案: