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

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

做的項(xiàng)目，用到了bootstrap的折疊功能，這個(gè)功能需要只展開一個(gè)折疊框，點(diǎn)擊一個(gè)就會(huì)自動(dòng)隱藏另一個(gè)，初始按照API做了一下，發(fā)現(xiàn)一切運(yùn)行正常，但是測(cè)試的同事提了一個(gè)bug，說切換到其他模塊后再切換回來，發(fā)現(xiàn)原先展開的折疊框沒有折疊起來--即恢復(fù)原樣。于是又去修改代碼，回來的時(shí)候?qū)λ姓郫B框調(diào)用： .collapse('hide')方法。

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

調(diào)用之后發(fā)現(xiàn)，點(diǎn)擊連接苗，data-parent失效了，也就是可以同時(shí)展開多個(gè)折疊框

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

于是找到了兩個(gè)解決的方法：

方法一:

在我的項(xiàng)目中，折疊框默認(rèn)是折疊的，即沒有.in類，基于以上的發(fā)現(xiàn)，于是改變?cè)创a：

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

因?yàn)樵赽ootstrap中折疊框的展開是由.in類修飾的，所以有.in類的必定是經(jīng)過點(diǎn)擊的，在初始化的時(shí)候

$(".love .collapse.in")

返回的必定是[]數(shù)組，因?yàn)槟J(rèn)是收起的。經(jīng)過幾個(gè)瀏覽器的測(cè)試，發(fā)現(xiàn)沒有問題，問題解決了。

方法二：

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

$(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（）方法可以獲取標(biāo)簽的data-*屬性，我認(rèn)為用在這里不是很好，主要是這個(gè)方法在IE6、IE7中不支持，要想完美兼容，可以使用attr（）方法。

以上是“bootstrap折疊調(diào)用collapse()后data-parent不生效怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！