2014-06-05 220 views
1

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

如果我实现这个代码:

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

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

取而代之的是:第一次点击,打开的元素关闭,但关闭的元素打开,第二次打开的元素关闭(所有元素关闭),第三次点击,所有元素打开,第四次点击,打开所有元素等。在此处查看演示:

http://jsfiddle.net/Lwrhk/

回答

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 is here:

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

+0

很好用;-) –