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