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 fiddle，似乎每当我将标题包裹在任何标签中时都会出现问题，如果它只是空白文本，则可以正常工作。

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

Answer 1

尝试删除 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();
    });


});

Answer 2

根据你的fiddle，我找到了问题。

请查看更新后的 fiddle：

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

问题出在以下代码：

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

您的 if 语句表示如果 e.target 处于活动状态，但如果您直接单击文本，则目标是 .accordion-section-title div 内部。其中没有 .active class.

jQuery 不会关闭的手风琴面板

jQuery Accordion Panels that wont close

javascript

jquery

accordion

jquery-ui-accordion