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

您可以像对.not()那样使用rotate2，请参阅下面的代码 -

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

Answer 2

您需要从所有面板中删除该类，或者从需要删除的位置删除该类，然后在单击的面板上添加该类。如下所示 -

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {
        //Added the below line to remove the class from all panels
        $('.accord-header-border').removeClass('accord-header-border');
        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 3

添加

$('.accordion .accord-header').removeClass('accord-header-border');

之前

$(this).toggleClass('accord-header-border');

它将删除所有元素的边框。

Answer 4

您可以使用hasClass方法检查点击的项目是否是当前项目，并根据具体情况执行不同的操作：

if ($(this).hasClass('accord-header-border') {
  $(this).removeClass('accord-header-border');
} else {
  $(".accordion .accord-header.accord-header-border").removeClass('accord-header-border');
  $(this).addClass('accord-header-border');
}

单击时添加删除边框

4 个答案: