垂直Accordian菜單單擊時重置活動狀態

Question

$(document).ready(function() {

    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');

    /* accordion_head.first().addClass('active').next().slideDown('normal'); */

    accordion_head.on('click', function(event) {

        event.preventDefault();

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });

});

我嘗試了幾次嘗試@讓活動的手風琴頭在單擊時關閉，但似乎無法解決:(

預先感謝史蒂文

$(document).ready(function() {

    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');

    /* accordion_head.first().addClass('active').next().slideDown('normal'); */

    accordion_head.on('click', function(event) {

        event.preventDefault();

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        } else {
            accordion_body.slideUp('normal');
            accordion_head.removeClass('active');
        }

    });

});

經過一段時間的搜索並且沒有在Java語言上發聲，我最終弄清楚了。 這是一個工作版本:)對於像我這樣的偷窺狂:)享受

Answer 1

似乎您使用以下行從手風琴標題中刪除了活動類：

accordion_head.removeClass('active');

然后立即在這行添加回去：

$(this).addClass('active');

我懷疑您不想重新添加活動班級嗎？

嘗試：

Accordion_head.on（'click'，function（event）{

    event.preventDefault();

    if ($(this).attr('class') != 'active'){
        accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
        $(this).addClass('active');
    }
    else {
      // Other code that applies when accordion_head is not active
      accordion_head.removeClass('active');
    }

});