Twitter Bootstrap手风琴切换按钮无法正常工作

时间:2014-06-05 16:52:47

标签: javascript css twitter-bootstrap accordion collapse

当我想使用一个按钮切换所有手风琴元素并且其中一些已经打开时,切换功能表现得非常奇怪。

如果我实现此代码:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse').collapse('hide');
        mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse').collapse('show');
        mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
}); 

我的预期结果是:首先单击,关闭所有元素,打开,第二次单击打开所有元素,第三次单击全部关闭等等。

相反,首先点击,打开元素关闭,关闭元素打开,第二次点击打开元素关闭(所有元素关闭),第三次点击,所有元素打开,第四次点击,所有元素打开等等< / p>

在此处查看演示:

http://jsfiddle.net/Lwrhk/

1 个答案:

答案 0 :(得分:1)

在同一个问题上工作时,我找到了你的问题,并用你的小提琴演奏,并通过仅对已经展开或折叠的元素进行操作来实现它:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse.in').collapse('hide');
        //mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse:not(.in)').collapse('show');            
        //mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
});

工作jfiddle在这里:

http://jsfiddle.net/RobbSadler/Lwrhk/12/