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

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

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

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

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

方法一:

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

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

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

$(".love .collapse.in") 

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

方法二：

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

$(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不生效的快速解決辦法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論