javascript - Jquery Accordion 自动关闭

Question

我正致力于为网站创建移动 Accordion 导航。我有一个基本的 Accordion 设置，我遇到的问题是当我打开一个选项卡时我希望其他选项卡自动关闭所以一次只能打开一个选项卡。这是代码

$(document).ready(function() {
// Collapsible Menu
function accordion(trigger) {
    //variables
    var $button = $(trigger),//trigger firing the event
        visible = true;//flag for wayfinding

        $button.hover().css({'cursor': 'pointer'});

    //event
    $button.click(function() {
        //conditional check
        if ( ! visible ) {
            $button.removeClass('active');
            $('.panel-title .icon').html('⊕');


            $(this).next().slideUp('slow',function() {
                $(this).addClass('visuallyhidden').slideDown(0);
                $('.panel-content').attr( 'aria-expanded','false' );
            });
        }else {
            $button.addClass('active');
            $('.panel-title.active .icon').html('⊗');

            $(this).next().slideUp(0,function() {
                $('.panel-content').attr( 'aria-expanded','true' );
                $(this).removeClass('visuallyhidden').slideDown('slow');
            });
        }

        //flag dude
        visible = !visible;
        return false
    });
}

//call to widget trigger1
accordion('#trigger1');
//call to widget trigger2
accordion('#trigger2');
//call to widget trigger3
accordion('#trigger3');

Codepen 链接 - http://codepen.io/Ahhmmogh/pen/WvMMZN

如有任何帮助，我们将不胜感激。

Answer 1

这是一个可用的代码笔:http://codepen.io/alezuc/pen/OVQvMV

我添加了对面板可见性和“事件”标题的检查

if ( $(this).find('.panel-content').css('display') == 'none' ) {...}
if ( $(this).hasClass('active') ) {...}