A comprehensive analysis of NAV and collapse in Bootstrap and its application _javascript techniques

I. Navigation Analysis (NAV)
Source file:
_navs.scss: navigation module
mixins/_nav-divider.scss: Separator Line
mixins/_nav-vertical-align.scss: Vertical alignment

1, just use CSS style decoration, no dependence on JS
2, the navigation module can contain the drop down module
3, the realization of horizontal, vertical, horizontal average distribution (Table-cell implementation, 4.0 Remove), tabs, capsules and other styles
4, Nav-divider: A pixel height to achieve the divider line
5, Nav-stacked: Vertical alignment implementation
6, provides the Tab-content class, uses in the Wrapping tab, then tab-pane as the content area, uses for the tab page the extension
7, Nav-tabs under the dropdown do a position to shrink the processing of a pixel, because the nav-tabs will be a bottom line, do not shrink up a pixel, there will be gaps in the gap appears

Specific dropdowns
. Nav-tabs. Dropdown-menu {
 //Make dropdown border overlap tab Border margin-top
 : -1px ;
 Remove the top rounded corners this since there is a hard edge above the menu
 @include border-top-radius (0);
}

Second, folding effect (collapse)
Source file:
Mixins/_component-animations.scss:collapse implementation to achieve folding effect
Javascripts/bootstrap/collapse.js: Folding Effect implementation

1, $this. Data () Collect all data-*
2, Parent Property: Specifies that the current collapse is controlled by that parent, mainly to achieve a more than one control effect, the following is hidden under the same parent all sub-list code:

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, the implementation of praent, but also need to integrate. Panel class, because all child lists are considered to be placed under the. Panel class in the lookup.
4. jquery End () method: Ends the current filter chain and restores the set of matching elements to the previous state (where the chain begins)
$ ("P"). Find ('. Bak '). See (' span '). End (): Restore to $ ("P")
5, ScrollHeight: The height of the page (get the actual height/width to expand), contains the invisible part of the window, in the collapse to identify the maximum value to expand, after the completion of the movement will be height/widht empty processing

var scrollsize = $.camelcase ([' Scroll ', Dimension].join ('-')) this
  . $element
   . One (' Bstransitionend ', $.proxy (complete, this))
   . Emulatetransitionend (collapse.transition_duration) [dimension] (this. $element [0][scrollsize])

6, the processing elements are divided into two categories, one is to expand or hide the elements themselves ($element), the second is to trigger the expansion or hidden elements of the button ($trigger)
7. In the Hiden method, the height of the collapsed area is redrawn, and then the height of the actual area is obtained:
This . $element [Dimension] (this. $element [dimension] ()) [0].offsetheigh
8. The triggering of the Hiden method is triggered by default by the judgment in the Show method:

if (actives && actives.length) {
  plugin.call (actives, ' hide ')
   Activesdata | | actives.data (' Bs.collapse ', null
  }

The above is the entire content of this article, I hope to learn JavaScript program to help you.