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

最新推荐文章于 2024-09-01 09:06:55 发布

tragedyxd

最新推荐文章于 2024-09-01 09:06:55 发布

阅读量1.8k

点赞数

分类专栏： FrontEnd

本文链接：https://blog.csdn.net/tragedyxd/article/details/43497989

版权

这篇博客介绍了如何使用纯JavaScript实现Dropdown下拉菜单，包括无动画效果的SimpleDropdown和带有上下移动动画的AccordionDropdown。作者通过获取class='dropdown'元素，验证data-toggle属性，并添加onclick事件来实现下拉菜单的开关效果。文中提到了通用方法和具体实现的接口，展示了前端开发中实现下拉菜单的基本思路。

摘要由CSDN通过智能技术生成

实现思路:

获取class="dropdown"的所有元素
验证其data-toggle是否为dropdown
添加 onclick 事件
在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