再次單擊頭部時關閉手風琴

Question

我正在使用 jQuery 來改變來自 Django Data 的一些手風琴的打開和關閉，數據顯示正確，當我點擊另一個元素時，其余的手風琴關閉，沒關系，但是當我再次點擊這個手風琴的同一個頭部時，這個不關就重新開一次。

$(document).on('click', '.accordion-head', function (e) {

    e.preventDefault();

    var value = $(this).children().children().attr("id");
    $("#paquete").val("Paquete seleccionado: " + value);

    $('.accordion-head').children().removeClass('active');
    $('.accordion-head').children().children().children().removeClass(' iluminar');
    $('.accordion-body').slideUp();
    $('.accordion-head .pull-right').html('+');
    $(this).next().slideDown();
    $(this).children().addClass('active');
    $(this).children().children().children().addClass(' iluminar');
    $(this).children().children().children().children().html('-');
    return false;
});

我希望當我點擊打開身體的頭部時，身體關閉，頭部回到一流的顏色（例如，最初的顏色是綠色，然后是橙色）。

例子：

提琴手

Answer 1

您可以使用hasClass()方法檢查您單擊的手風琴是否具有active類。 這是更新后的代碼：

$(document).on('click', '.accordion-head', function (e) {
    e.preventDefault();

    var value = $(this).children().children().attr("id");
    $("#paquete").val("Paquete seleccionado: " + value);

    $(this).children('a.iluminar').toggleClass('active');
    $('.accordion-head h3').removeClass('iluminar');
    $('.accordion-head .pull-right').html('+');
    $('.accordion-body').slideUp();

    if ($(this).children('a.iluminar').hasClass('active')) {
        $(this).next().slideDown();
        $(this).find('h3').addClass('iluminar');
        $(this).find('.pull-right').html('-');
    }
});

這是基於您的代碼的小提琴。

我希望這能如你所願。