今天做的項目，用到了bootstrap的折疊功能，這個功能需要只展開一個折疊框，點擊一個就會自動隱藏另一個，初始按照API做了一下，發(fā)現一切運行正常，但是測試的同事提了一個bug，說切換到其他模塊后再切換回來，發(fā)現原先展開的折疊框沒有折疊起來--即恢復原樣。于是又去修改代碼，回來的時候對所有折疊框調用： .collapse('hide')方法。

$(".love .collapse").collapse('hide'); 

調用之后發(fā)現，點擊連接苗，data-parent失效了，也就是可以同時展開多個折疊框

這嚴重脫離了需求，于是又去查了API并寫了幾個demo，發(fā)現了一個問題，只要在初始化的時候調用 .collapse()方法，就會出現這種同時展開多個折疊框的情況。但是奇怪的是：當頁面渲染出來后，你去點擊了折疊框后，這個時候再觸發(fā)某個事件調用.collapse()方法，就不會出現這種同時展開多個的情況。

于是找到了兩個解決的方法：

方法一:

在我的項目中，折疊框默認是折疊的，即沒有.in類，基于以上的發(fā)現，于是改變源碼：

$(".love .collapse.in").collapse('hide'); 

因為在bootstrap中折疊框的展開是由.in類修飾的，所以有.in類的必定是經過點擊的，在初始化的時候

$(".love .collapse.in") 

返回的必定是[]數組，因為默認是收起的。經過幾個瀏覽器的測試，發(fā)現沒有問題，問題解決了。

方法二：

在一個外國網站也發(fā)現了一個解決的方法，觸發(fā)這種事件發(fā)生的原因是bootstrap的js的某個機制的實現問題，但是API沒有給出這種事件的說明和處理方法，于是我們可以重寫折疊框展開和收起的事件，首先在連接處加一個類.collapse-toggle，這個類可以隨便指定.：

$(document).on('click', '.collapse-toggle', function(event) { 
    event.stopPropagation(); 
    var $this = $(this); 
    var parent = $this.data('parent'); 
    var actives = parent && $(parent).find('.collapse.in'); 
    // From bootstrap itself 
    if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
    } 
    var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 
    $(target).collapse('toggle'); 
});​ 

這里用到了jQuery的data（）方法，data（）方法可以獲取標簽的data-*屬性，我認為用在這里不是很好，主要是這個方法在IE6、IE7中不支持，要想完美兼容，可以使用attr（）方法。

以上所述是小編給大家介紹的bootstrap折疊調用collapse()后data-parent不生效的快速解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

最新評論