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

Source: Internet
Author: User
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  
   
Related Article

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.