Javascript 使用ToggleClass显示div并隐藏其他

我有一个关于jQuery切换功能的问题。我想实现的是，如果我点击箭头，内容将变为可见，而所有其他内容将被隐藏

我使用此JS代码以通用方式切换类：

$(function () {         
    $('.main-diff .blue-bg .arc_arrow').click(function () {                                                     
        $(this).toggleClass('arc_arrow--displayed');
        $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');                
    });
});

要查看我的HTML代码和CSS，您可以在此处查看：

---

我试图添加

$（'.matchfooter'）。removeClass（'matchfooter--displated'）但如果我再次单击同一个箭头，则不会再隐藏内容。
您需要从其他元素中删除类，这可以通过使用
.not（）
选择器来实现

$('.main-diff .blue-bg .arc_arrow').click(function () {
    //Hide others        
    $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
    $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');

    $(this).toggleClass('arc_arrow--displayed');
    $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');
});

您需要从其他元素中删除类，这可以通过使用
.not（）
选择器来实现

$('.main-diff .blue-bg .arc_arrow').click(function () {
    //Hide others        
    $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
    $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');

    $(this).toggleClass('arc_arrow--displayed');
    $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');
});

您只需添加类，然后单击“其他”即可将其删除，而无需切换

$(function () {
    $('.main-diff .blue-bg .arc_arrow').click(function () {
        //Hide others        
        $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
        $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');

        $(this).addClass('arc_arrow--displayed');
        $(this).parent().next('.matchfooter').addClass('matchfooter--displayed');
    });
});

您只需添加类，然后单击“其他”即可将其删除，而无需切换

$(function () {
    $('.main-diff .blue-bg .arc_arrow').click(function () {
        //Hide others        
        $('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
        $('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');

        $(this).addClass('arc_arrow--displayed');
        $(this).parent().next('.matchfooter').addClass('matchfooter--displayed');
    });
});

我已经解决了您的问题，只需使用以下内容更改jquery代码，然后重试：-

$(function () {         
    $('.main-diff .blue-bg .arc_arrow').click(function () {                                                     
        $(this).toggleClass('arc_arrow--displayed');
        $(".matchfooter").removeClass("matchfooter--displayed");
        $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');                
    });
});

我已经解决了您的问题，只需使用以下内容更改jquery代码，然后重试：-

$(function () {         
    $('.main-diff .blue-bg .arc_arrow').click(function () {                                                     
        $(this).toggleClass('arc_arrow--displayed');
        $(".matchfooter").removeClass("matchfooter--displayed");
        $(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');                
    });
});

这太棒了！但一旦打开内容，就无法隐藏它。只能通过单击另一个弧形箭头来隐藏内容。你知道如何解决这个问题吗？@Rotan075，你到底需要什么？我需要的是通过单击其他箭头并再次单击来关闭内容。现在，如果
'matchfooter'
可见，并且您希望通过再次单击来关闭它，那么只会更改arrow类，并且不会隐藏内容。更清楚的是：点击第一个打开的内容->点击同一个箭头->内容不会被隐藏。这太棒了！但一旦打开内容，就无法隐藏它。只能通过单击另一个弧形箭头来隐藏内容。你知道如何解决这个问题吗？@Rotan075，你到底需要什么？我需要的是通过单击其他箭头并再次单击来关闭内容。现在，如果
'matchfooter'
可见，并且您希望通过再次单击来关闭它，那么只会更改arrow类，并且不会隐藏内容。更清楚的是：点击第一个打开的内容->点击同一个箭头->内容不会被隐藏。谢谢！确实，这也是可能的，但我仍然存在通过单击显示内容的div中的箭头来隐藏
matchfooter
的问题。通过单击“其他”或再次单击来关闭它？我需要的是两者；）更新了我的小提琴，符合你的要求。检查一下。太棒了！非常感谢你！正是我想要的！谢谢确实，这也是可能的，但我仍然存在通过单击显示内容的div中的箭头来隐藏
matchfooter
的问题。通过单击“其他”或再次单击来关闭它？我需要的是两者；）更新了我的小提琴，符合你的要求。检查一下。太棒了！非常感谢你！正是我想要的！