不會關閉的jQuery手風琴面板

Question

我是jquery新手，我有以下代碼可從div創建手風琴樣式面板。 該代碼運行良好，但是，如果我單擊已經打開的面板，它將關閉該面板，然后立即重新打開它。 僅當其面板已經激活時才適用。 如果我單擊其他按鈕，則效果很好。

$(document).ready(function() {

    $('.accordion-section-title').addClass('active');
    // Open up the hidden content panel
    $('.accordion ' + '#accordion-1').slideDown(300).addClass('open'); 

    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');

    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();

        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });


});

我已經附上了一個js小提琴，看來只要將標題包裝在任何標簽中，只要標題為空白文本，就可以正常工作。

https://jsfiddle.net/russ1337/ynfs4zw3/

Answer 1

根據您的小提琴，我發現了問題。

請參閱更新的小提琴：

https://jsfiddle.net/ynfs4zw3/2/

問題是以下代碼：

if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
           ...
        }

您的if語句表示如果e.target是活動的，但是如果直接單擊文本，則該目標為.accordion-section-title div的內部。 其中沒有.active類。

Answer 2

嘗試刪除close_accordion_section（）; 在else語句中：

$(document).ready(function() {

    $('.accordion-section-title').addClass('active');
    // Open up the hidden content panel
    $('.accordion ' + '#accordion-1').slideDown(300).addClass('open'); 

    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');

    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();

        }else {

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });


});