Implementation ideas:
- Get all elements of class= "dropdown"
- Verify that its data-toggle is dropdown
- Adding an onclick event
- Add/Remove "open" Class on dropdown
- Judge open to implement the corresponding toggle on/Off
Currently only completed:
- Simpledropdown: No animation effect, open/close by modifying display
- Accordiondropdown: Animated effect that moves up and down, animating and turning on/off by modifying height
The blue on the left is the Universal method (inheritance), and the right side is the method (interface) that is implemented. .
General Method:
function Isdropdowntoggle (toggle) { if (toggle.attributes["data-toggle"].value = = "Dropdown") { return true; } return false;} function IsOpen (dropdownnode) { if (dropdownNode.className.indexOf ("open") >-1) { return true; } return false;}
Simpledropdown DOM
<li class= "dropdown" data-toggle= "dropdown" > <a class= "btn" HRE f= "#" > <i class= "halflings-icon white user" ></i> Cdk <span class= "Caret" ></span> </a> <ul cl ass= "Dropdown-menu" > <li class= "Dropdown-menu-title" > <span> account Settings </span> </li> <li> <a href= "#" ><i class= "Halflings-icon user" ></i> personal information </a> </li> <li> <a HR ef= "#" ><i class= "Halflings-icon off" ></i> logout </a> </li> </uL> </li>
Simpledropdown JS
function Initsimpledropdown () {var dropdownstoggles = document.getelementsbyclassname ("dropdown"); for (var i = 0; i < dropdownstoggles.length; i++) {if (!isdropdowntoggle (Dropdownstoggles[i])) {con Tinue; } Dropdownstoggles[i].onclick = function () {var dropdownmenus = this.getelementsbyclassname ("dropdown- Menu "); if (Dropdownmenus.length > 0) {Toggle (this, dropdownmenus); } }; } function Toggledropdown (Dropdownmenus, operate) {for (var j = 0; J < Dropdownmenus.length; J + +) { Dropdownmenus[j].style.display = operate; }} function Toggle (target, Dropdownmenus) {if (IsOpen (target)) {Target.classname = target.cl Assname.replace ("Open", ""); Toggledropdown (Dropdownmenus, "none"); } else {target.classname = Target.classname + "" + "open"; Toggledropdown (DropdownmenuS, "Inline-block"); } }}
Accordiondropdown DOM
<li class= "Accordion-dropdown" data-toggle= "dropdown" > <a href= "#" ><i class= "Icon-folder -close-alt "></i><span> dropdown</span><span class=" Label label-important "> 3 </span ></a> <ul> <li> < A class= "submenu" href= "submenu.html" ><i class= "Icon-file-alt" ></i><span class= "Hidden-tablet" > Sub Menu 1</span></a> </li> <li><a CLA ss= "submenu" href= "submenu2.html" ><i class= "Icon-file-alt" ></i><span class= "Hidden-tablet" > Sub Menu 2</span></a></li> <li><a class= "submenu" href= "submenu3.htm L "><i class=" Icon-file-alt "></i><span class=" Hidden-tablet "> Sub menu 3</span></a> </li> </ul> </li>
Accordiondropdown JS
function Accordiondropdown () {var accordiondropdowns = document.getelementsbyclassname ("Accordion-dropdown"); for (var i = 0;i < accordiondropdowns.length;i++) {if (!isdropdowntoggle (Accordiondropdowns[i])) { Continue } Accordiondropdowns[i].onclick = function () {var uls = this.getelementsbytagname ("ul"); if (Uls.length > 0) {Toggle (this, ULS); }}} function Toggledropdown (Dropdownmenus, operate) {for (var j = 0; J < Dropdownmenus.lengt H J + +) {dropdownmenus[j].style.height = operate; }} function Toggle (target, Dropdownmenus) { var subelements = dropdown Menus[0].getelementsbytagname ("Li"); var totalexpandheight = subElements [0].offsetheight * subelements.length; if (iSopen (target)) { Target.classname = Target.className.replace ("Open", ""); Toggledropdown (Dropdownmenus, "0px"); } else { target.classname = Target.classname + "" + "open"; Toggledropdown (Dropdownmenus, totalexpandheight.tostring () + "px"); } }}
FrontEnd: Dropdown, pure JavaScript implementation drop-down menu