FrontEnd: Dropdown, pure JavaScript implementation drop-down menu

Source: Internet
Author: User


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

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.