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

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

DEMO

Answer 2

而不是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');
    });
});

Fiddle

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

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

3 个答案: