FrontEnd: Dropdown, pure JavaScript implementation drop-down menu

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:

1. Simpledropdown: No animation effect, open/close by modifying display
   
2. 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