制作点击事件只影响父类的孩子？-Java 学习之路

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

For example:

+Computers

+Phones

-Tablets

   Android Tablets

   Windows Tablets

   Apple iPads

问题是，如果你点击Tablets来展开它，如上面的例子所示，然后再次点击它以折叠平板电脑列表，它将切换所有其他父手风琴列表的所有图标，并带有一个有效的加号图标到零甚至虽然他们崩溃了 .

Here's my 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

3 回答

为了简单起见：

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

回复于 2024-05-19T13:46:38+08:00

0

尝试在li上切换类并为li设置样式：在内容之前：“ - ”或内容：“”取决于活动类 .

回复于 2024-05-19T13:46:38+08:00

我想在你提供的代码中代替：

$('.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

回复于 2024-05-19T13:46:38+08:00

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

3 回答

相关问题