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

实现思路:

在dropdown 上增加/删除"open" class判断open实现相应的toggle进行开/关

目前只完成了:SimpleDropdown : 无动画效果, 通过修改display实现开/关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");        }    }}

，最重要的是今天的心。