Auto-collapse hidden in bootstrap navigation bar under small screen and phone screen

Problems encountered:

Recently when using the bootstrap framework to make a Web page found that under the small screen and phone screen (max-width:768px), the navigation bar can not be clicked on the navigation link, automatic folding navigation bar. Or, after you expand the navigation bar, if you do not click on the navigation link, the user will not be able to automatically collapse the navigation bar when they select the slide screen. Users need to manually click the collapse button to get back. This is in the small screen valuable display area, obviously unreasonable, the user experience is not good.

I use a motion diagram to better illustrate the problem:

　　

Workaround:

Look at the HTML code first:

1 <!--HTML -2 <navclass= "NavBar navbar-fixed-top">3   <Divclass= "Container">4   <!--Navbar-header -5     <Divclass= "Navbar-header">6       <Buttontype= "button"class= "Navbar-toggle collapsed"Data-toggle= "Collapse"Data-target= "#navbar"aria-expanded= "false"Aria-controls= "NavBar">7         <spanclass= "Sr-only">Toggle Navigation</span>8         <spanclass= "Icon-bar"></span>9         <spanclass= "Icon-bar"></span>Ten         <spanclass= "Icon-bar"></span> One       </Button> A       <aclass= "Navbar-brand"href="#">Project Name</a> -     </Div> -     <!--Navbar-nav - the     <DivID= "NavBar"class= "Navbar-collapse collapse"> -       <ulclass= "Nav navbar-nav"> -         <Liclass= "Active"><ahref="#">Home</a></Li> -         <Li><ahref= "#features">Features</a></Li> +         <Li><ahref= "#about_me">About Me</a></Li> -       </ul> +     </Div> A   </Div> at </nav>

The method of folding (Collapse) in Bootstrap is as follows:

Method	Description	Example
options:. Collapse (options)	The active content is a collapsible element. Accept an optional options object.	$(' #identifier '). Collapse({ Toggle:false})
Toggle:. Collapse (' Toggle ')	Toggle Show/Hide collapsible elements.	$(' #identifier '). Collapse(' Toggle ')
Show: . Collapse (' show ')	Displays collapsible elements.	$(' #identifier '). Collapse(' show ')
Hide: . Collapse (' hide ')	Hides collapsible elements.	$(' #identifier '). Collapse(' hide ')

Knowing the collapse method, the problem is much easier to solve, just need to scroll or click the navigation link, call. Collapse (' hide ') method, you can implement auto-folding navigation bar.

The JavaScript code is as follows:

1$ (window). Scroll (function () {2   //the navigation bar folds under the small screen3   if($ (window). Width () < 768) {4     //after clicking the navigation link, fold the navigation options.5$ ("#navbar a"). Click (function () {6$ ("#navbar"). Collapse (' Hide ');7     });8     //when scrolling the screen, fold the navigation options.9$ (window). Scroll (function () {Ten$ ("#navbar"). Collapse (' Hide '); One     }); A   } -});

The effect of automatic folding of the navigation bar is as follows:

Hopefully this article will help people who have the same problem!

Auto-collapse hidden in bootstrap navigation bar under small screen and phone screen