FrontEnd 步步高升:Dropdown,纯javascript实现下拉菜单

实现思路:

• 获取class="dropdown"的所有元素
• 验证其data-toggle是否为dropdown
• 添加 onclick 事件
• 在dropdown 上增加/删除
  "open" class
• 判断open实现相应的toggle进行开/关

目前只完成了:

1. SimpleDropdown              :  无动画效果, 通过修改display实现开/关
2. AccordionDropdown         :  有上下移动的动画效果,通过修改height, 实现动画效果和开/关

图上左边蓝色的是通用方法(继承),右边的是各自实现的方法(接口).

通用方法:

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" href="#">
                                <i class="halflings-icon white user"></i> Cdk
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-menu-title">
                                    <span>帐户设置</span>
                                </li>
                                <li>
                                    <a href="#"><i class="halflings-icon user"></i> 个人信息</a>
                                </li>
                                <li>
                                    <a href="#"><i class="halflings-icon off"></i> 注销</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])) {
            continue;
        }
        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.className.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 class="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.html"><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.length; j++) {
            dropdownMenus[j].style.height = operate;
        }
    }

    function toggle(target, dropdownMenus){
        var subElements = dropdownMenus[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");
        }
    }
}