JS component Bootstrap implement drop-down menu effects code _ javascript skills

This article describes in detail the code for implementing the pull-down menu of JS component Bootstrap. If you are interested, refer Bootstrap drop-down menuThis chapter describes the drop-down menu, but does not involve interaction. This chapter describes the interaction of the drop-down menu. With the drop-down plug-in, you can add drop-down menus to any components (such as navigation bar, tabs, capsule navigation menus, buttons, and so on.

If you want to reference the function of this plug-in separately, you need to reference dropdown. js. Alternatively, as mentioned in the Bootstrap plug-in overview chapter, you can reference bootstrap. js or the compressed version of bootstrap. min. js.

I. Usage
You can switch the hidden content of the drop-down menu (Dropdown) Plug-in:

1. Use data properties: add data-toggle = "dropdown" to the link or button to switch the drop-down menu, as shown below:

Drop-down Trigger
 
 

  
  
...
 
 

If you need to keep the link complete (useful when the browser does not enable JavaScript), use the data-target attribute instead of href = "#":

Drop-down menu (Dropdown)
 
 

  
  
...
 
 

2. Use JavaScript to call the drop-down menu switch through JavaScript. Use the following method:
$ ('. Dropdown-toggle'). dropdown ()

Ii. Simple drop-down menu examples
The Code is as follows:

// Declarative usage
  Drop-down menu  
 
 
     
  
  
Homepage
     
  
  
Product
     
  
  
Information
     
  
  
About
  
 
 

Key Points of declarative usage:
1. The peripheral container uses the class = "dropdown" package;
2. click the button internally to bind the event data-toggle = "dropdown ";
3. Use class = "dropdown-menu" as the menu element ".

// If the button is outside the container, bind it using data-target.In JavaScript calls, there is no attribute and the method is not easy to use. The following describes four basic events. // The drop-down menu method, but data-* $ ('# btn'). dropdown (); $ ('# btn'). dropdown ('toggle ');

The drop-down menu supports four types of events: before, after, before, and after the pop-up.

// Event, which is similar to $ ('# dropdown'). on ('Show. bs. droplow', function () {alert ('triggered immediately when the show method is called! ');});

3. usage of the drop-down menu in the tab

  Bootstrap instance-tab with drop-down menu