不会关闭的jQuery手风琴面板

Question

I'm new to jquery and I have the following code that creates accordion style panels from divs. The code runs fine, however, if I click on a panel that's already open, it closes the panel, and then instantly reopens it. This only applies if its an already active panel. If I click a different one it works fine.

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


});

I've attached a js fiddle, It looks like the issue happens whenever I wrap the title in any tag, if its just blank text, it works fine.

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

Answer 1

based on your fiddle, I have found the problem.

Please see updated fiddle:

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

The problem was the following code:

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

Your if statement said that if e.target is active but in if you clicked directly on the text, the target was the inside the .accordion-section-title div. Which did not have the .active class.

Answer 2

Try removing the close_accordion_section(); in the else statement:

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


});