bootstrap折疊調用collapse()后data-parent不生效怎么辦

這篇文章主要介紹bootstrap折疊調用collapse()后data-parent不生效怎么辦，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

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

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

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

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

方法一:

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

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

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

$(".love .collapse.in")

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

方法二：

在一個外國網站也發現了一個解決的方法，觸發這種事件發生的原因是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不生效怎么辦”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！