jquery手风琴在新标签上崩溃打开

时间:2016-08-08 15:33:38

标签: javascript jquery html accordion

我试图让我的手风琴崩溃点击下一个标签,我遇到了问题。我相信代码是正确的,标签打开。但如果我点击标签2,标签1仍保持打开状态。

如果标签打开,箭头也不会指向下方。

HTML

<ul class="aside-nav d-all grey-border ">
            <li class="aside-open-close active">
                <a class="aside-opener" href="#">tab1</a>
                <div class="slide">
                    content
                </div>
            </li>
            <li class="aside-open-close ">
                <a class="aside-opener" href="#">tab2</a>
                <div class="slide">
                    content
                </div>
            </li>
            <li class="aside-open-close ">
                <a class="aside-opener" href="#">tab3</a>
                <div class="slide">
                    content
                </div>
            </li>
        </ul>

JQUERY

    // open-close init
function initOpenClose() {
    jQuery('.open-close, .aside-open-close').openClose({
        activeClass: 'active',
        opener: '.opener, .aside-opener',
        slider: '.slide',
        animSpeed: 400,
        effect: 'slide'
    });
    jQuery('.nav').openClose({
        activeClass: 'active',
        opener: '.nav-opener',
        slider: '.nav-slide',
        animSpeed: 400,
        effect: 'slide'
    });

    jQuery('#nav .drop').each(function(){
        var holder = jQuery(this);
        var opener = holder.children('a');
        var drop = holder.children('.drop-holder');

        opener.on('click', function(e){
            e.preventDefault();
            holder.toggleClass('hover');
        });

        jQuery('body').on('click', function(e){
            if(holder.hasClass('hover') && !jQuery(e.target).closest(holder).length) holder.removeClass('hover')
        });
    });
}

1 个答案:

答案 0 :(得分:0)

如果将[ul]标签设置为手风琴,则可以正常使用

添加此

$('.aside-nav').accordion();

Working fiddle