使用ToggleClass显示div并隐藏其他

Question

我有一个关于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，您可以在这里查看一下：JSFIDDLE

我尝试添加$('.matchfooter').removeClass('matchfooter--displayed');，但如果再次单击相同的箭头，内容就不再隐藏。

Answer 1

而不是toggle，您只需添加类并在单击其他类时删除它。

$(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');
    });
});

小提琴

Answer 2

您需要从其他元素中删除类，这可以使用.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');
});

演示

Answer 3

我已经解决了您的问题，只需更改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');                
    });
});