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

来源:https://www.sucaihuo.com/js/3881.html 2018-08-22 12:14浏览(1094) 收藏

js+css3制作一款简洁美观的多级手风琴展开收缩下拉菜单代码,侧边栏手风琴导航下拉菜单点击展开收缩效果。
js+css3多级手风琴展开收缩下拉菜单代码
分类:导航菜单 > 多级菜单 难易:初级
查看演示 下载资源 下载积分: 20 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2