jquery - 单击添加删除边框

Question

我正在尝试在 .accord-header 上添加和删除 .accord-header-border 类，以便它显示和隐藏边框线。我可以在点击时打开和关闭它。问题是如何添加在我单击不同面板时删除它的逻辑。

View the JSFiddle看看这是如何工作的...

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {

        var im = $(this).find('img');
        $('.rotate2').not(im).removeClass('rotate2');
        im.toggleClass('rotate2');

    // The toggle on the border
        $(this).toggleClass('accord-header-border');


        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp("normal");


        } else {
            $(".accordion .accord-content").slideUp("normal");
            $(this).next("div").slideToggle("normal");
        }
    });
});

Answer 1

你可以像使用rotate2一样使用.not()，见下面的代码-

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {

        var im = $(this).find('img');
        $('.rotate2').not(im).removeClass('rotate2');
        im.toggleClass('rotate2');

        //add accord-header-border to other elements
       $('.accordion .accord-header').not(this).addClass('accord-header-border');
    // The toggle on the border
        $(this).toggleClass('accord-header-border');


        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp("normal");


        } else {
            $(".accordion .accord-content").slideUp("normal");
            $(this).next("div").slideToggle("normal");
        }
    });
});