這篇文章主要為大家詳細(xì)解析了Bootstrap中nav、collapse的使用方法，感興趣的朋友可以參考一下

一、導(dǎo)航分析（nav)

源碼文件：

_navs.scss：導(dǎo)航模塊

Mixins/_nav-divider.scss：分隔線(xiàn)

Mixins/_nav-vertical-align.scss：垂直對(duì)齊

1、只是用css進(jìn)行了樣式修飾，對(duì)Js沒(méi)有任何依賴(lài)

2、導(dǎo)航模塊可以包含下拉模塊

3、實(shí)現(xiàn)了水平、垂直、水平平均分配（table-cell實(shí)現(xiàn)，4.0移除）、tabs、膠囊等樣式

4、Nav-divider：有一個(gè)像素的高度實(shí)現(xiàn)分隔線(xiàn)

5、Nav-stacked：垂直對(duì)齊實(shí)現(xiàn)

6、提供了tab-content類(lèi)，用于包裹tab，然后tab-pane做為內(nèi)容區(qū)域，用于tab頁(yè)的擴(kuò)展

7、Nav-tabs下的dropdown做了位置向上收縮一個(gè)像素的處理，因?yàn)閚av-tabs會(huì)一條底線(xiàn)，不向上收縮一個(gè)像素，會(huì)有空白間隙出現(xiàn)

// Specific dropdowns

.nav-tabs .dropdown-menu {

 // make dropdown border overlap tab border

 margin-top: -1px;

 // Remove the top rounded corners here since there is a hard edge above the menu

 @include border-top-radius(0);

}

二、折疊效果(collapse)

源碼文件：

Mixins/_component-animations.scss：collapse實(shí)現(xiàn)，實(shí)現(xiàn)折疊效果

Javascripts/bootstrap/collapse.js：折疊效果實(shí)現(xiàn)

1、$this.data()收集所有data-*數(shù)據(jù)

2、Parent屬性：指定當(dāng)前這個(gè)collapse被那個(gè)父級(jí)所控制，主要實(shí)現(xiàn)一控多的效果，以下是隱藏同一父級(jí)下所有子列表代碼：

return $(this.options.parent)

   .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')

   .each($.proxy(function (i, element) {

    var $element = $(element)

    this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)

   }, this))

   .end()

3、Praent的實(shí)現(xiàn)，還需要整合.panel類(lèi)，因?yàn)椴檎視r(shí)認(rèn)為所有子列表都是放在.panel類(lèi)下的

4、Jquery的end（）方法：結(jié)束當(dāng)前篩選鏈，并將匹配元素集還原為之前的狀態(tài)（鏈開(kāi)始的位置）

$(“p”).find(‘.bak').find(‘span').end()：還原到$(“p”)

5、scrollHeight：頁(yè)面的高度（獲取為要展開(kāi)的實(shí)際高度/寬度），包含視窗不可見(jiàn)的部分，在collapse中用于識(shí)別要展開(kāi)的最大值，在運(yùn)動(dòng)完成后都會(huì)對(duì)height/widht清空處理

var scrollSize = $.camelCase(['scroll', dimension].join('-'))

  this.$element

   .one('bsTransitionEnd', $.proxy(complete, this))

   .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])

6、對(duì)處理元素分為兩類(lèi)，一是要展開(kāi)或隱藏的元素本身（$element），二是觸發(fā)展開(kāi)或隱藏元素的按鈕（$trigger）

7、在hiden方法中，會(huì)重繪折疊區(qū)域的高度，然后獲取實(shí)際區(qū)域的高度：

this.$element[dimension](this.$element[dimension]())[0].offsetHeigh

8、Hiden方法的觸發(fā)默認(rèn)情況下都是通過(guò)show方法中的判斷觸發(fā)的：

if (actives && actives.length) {

  Plugin.call(actives, 'hide')

   activesData || actives.data('bs.collapse', null)

  }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。