js+css3手风琴展开收缩下拉菜单代码

作者 : 小刺猬 本文共547个字,预计阅读时间需要2分钟 发布时间: 2020-07-30 共189人阅读

js+css3手风琴展开收缩下拉菜单代码

这是一款扁平化风格js+css3手风琴展开收缩下拉菜单代码,带小图标,支持多级子菜单。

js代码

<script>
var list = document.querySelectorAll('.list');

function accordion(e) {
    e.stopPropagation();
    if (this.classList.contains('active')) {
        this.classList.remove('active');
    } else
    if (this.parentElement.parentElement.classList.contains('active')) {
        this.classList.add('active');
    } else
    {
        for (i = 0; i < list.length; i++) {
            list[i].classList.remove('active');

        }
        this.classList.add('active');
    }
}
for (i = 0; i < list.length; i++) {
    list[i].addEventListener('click', accordion);
}
</script>
登录后免费查看

已有189人阅读


刺猬源码 » js+css3手风琴展开收缩下拉菜单代码

刺猬QQ交流群号多少?
363432
刺猬官方有技术支持吗?
有的,但技术支持是有偿服务哦,咨询右下角的在线客服吧!
下载的资源不能使用怎么办?
如果在本站下载的资源不能使用,一经确认可以联系在线客服退款。

发表评论

刺猬源码网,累计帮助1000+用户成功建站,为草根创业提供助力!

立即查看 了解详情