Question

我找不到正在寻找的确切方案。我试图以一种替代关闭按钮的方式从父div中切换出一个类。为了给你一个明确的想法，我发布了整个代码。

    $('.team__list li').on('click', function() {
        $('.team__list li').removeClass('active');
        $(this).addClass('active');
        console.log('hi');
    }); 

    $('.team__list li .close-button').click(function(event) {
        $(this).closest('.team__list li').removeClass('active');
        event.stopPropagation();
    });

    $('.active *').on('click',function(event) {
        console.log('hi');
        $(this).closest('.team__list li').removeClass('active');
        event.stopPropagation();
    });

第一个块在单击元素时触发活动类并从兄弟节点中删除它，第二个块在关闭按钮时正确删除类。但是，我根本无法解决第三个问题。

应该注意（不确定是否重要）在接收到活动类时，子元素（带有子元素）绝对位于活动元素之上。

编辑：

$('.team__list li').not('.active').on('click', function(event) {
        $('.team__list li').removeClass('active');
        $(this).addClass('active');
        console.log('open');
        event.stopPropagation();
    });



    $('.team__list li .close-button').click(function(event) {
        $(this).closest('.team__list li').removeClass('active');
        event.stopPropagation();
    });

    $(".team__list").on('click', ".active *", function(event) {
        console.log('close');
        $(this).closest('.team__list li').removeClass('active');
        event.stopPropagation();
    });

Answer 1

由于您在运行时添加和删除class，因此必须使用event-delegation绑定事件。因为在页面加载期间注册的事件不适用于在运行时期间符合该事件的元素。

$(".team__list").on('click', ".active *", function(event) {
   //your code goes here.

单击其中的任何内容时从父项中删除类

1 个答案: