繁体   English   中英

不会关闭的jQuery手风琴面板

[英]jQuery Accordion Panels that wont close

我是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/

根据您的小提琴,我发现了问题。

请参阅更新的小提琴:

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

问题是以下代码:

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

您的if语句表示如果e.target是活动的,但是如果直接单击文本,则该目标为.accordion-section-title div的内部。 其中没有.active类。

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


});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM