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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.