The Bootstrap drop-down menu chapter explains the drop-down menu, but does not involve the interaction part. This chapter will explain the interaction of the drop-down menu in detail. Using the dropdown plugin, you can add dropdown menus to any component (such as navigation bars, tabs, capsule navigation menus, buttons, etc.).
If you want to reference the functionality of the plugin separately, then you need to reference dropdown.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
You can toggle the hidden content of the dropdown menu (Dropdown) plugin:
1. Use data attribute: add data-toggle="dropdown" to the link or button to switch the drop-down menu, as shown below:
<div> <a data-toggle="dropdown" href="#">Dropdown trigger</a> <ul role="menu" aria-labelledby="dLabel"> ... </ul></div>
If you need to keep the link intact (useful when the browser does not enable JavaScript), use the data-target property instead of href="#":
<div> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown menu (Dropdown) <span></span> </a> <ul role="menu" aria-labelledby="dLabel"> ... </ul></div>
2. Through JavaScript: To switch through JavaScript, please use the following method:
$('.dropdown-toggle').dropdown()
2. Simple example of drop-down menu
In general use, the code is the same as component methods:
//Declarative usage<div> <button data-toggle="dropdown"> drop-down menu<span></span> </button> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Information</a></li> <li><a href="#">About </a></li> </ul></div>
The key core of declarative usage:
1. Use packages for peripheral containers;
2. Binding data-toggle="dropdown" for internal click button event;
3. Use menu elements.
//If the button is outside the container, it can be bound through data-target. <button id="btn" data-toggle="dropdown"data-target="#dropdown">In JavaScript calls, there are no properties and the method is not easy to use. The following are four basic events. //Drop down menu method, but still need data-*$('#btn').dropdown();$('#btn').dropdown('toggle');The drop-down menu supports 4 kinds of events, corresponding to before pop-up, after pop-up, before closing and after closing.
//Events, other similar $('#dropdown').on('show.bs.dropdown', function() { alert('Freaks immediately when the show method is called!');});3. Usage of drop-down menus in the tab page
<!DOCTYPE html><html><head> <title>Bootstrap instance - Tag page with drop-down menu</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <p> Tag page with drop-down menu</p><ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li> <a data-toggle="dropdown" href="#">Java <span></span> </a> <ul> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Signed link</a></li> </li> </li> <li><a href="#">PHP</a></li></ul> </body></html>
Reproduction image:
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.