使用JavaScript进行扩展的二级菜单
新案例
伸缩二级菜单
案例说明：效果图如下，一次只能打开一个。 打开后，号码会改变。
HTML代码
沥{
/*取消Li点*
列表样式： none；
}
沥li span {
在span标签中设置背景图像(开头的小加号(减号、无重复循环、初始位置0 ) ) /
ackground:URL(add.png ) no-repeat left center；
padding-left: 20px；
}
/*开始样式*
li ul{
height: 0；
//溢出隐藏/
Overflow :隐藏；
/*添加过渡效果*
transition: all 0.5s；
}
/*展开样式*
. open{
背景图像3360 URL (MINUS.png )；
}
. open ul{
height: 70px；
}
考勤管理日常工休申请加班信息中心日常工休申请加班出差协同工作日常工休申请加班出差JavaScript代码
//拉伸清单
//实现构想：
var spans=document.queryselectorall ('.tree span )；
for(varI=0； i spans.length； I ) {
spans[i].onclick=function (
//console.log(this )；
//查找要修改的元素span本身
修改、删除或添加class - open
//判断自己的身体是否有open，如果有就删除！
//this -指触发事件的元素本身
if(this.classname=='open ' ) )。
//如果有就删除！
this.className=' '；
} else {
//如果没有，添加，删除其他打开的东西！
找到//打开(打开属性的li )
varopenspan=document.query selector '.tree.open ' )
开放跨度！==null )
//如果集合不为空，则删除他们的open属性
openSpan.className=' '；
}
//为自己设置open属性
this.className='open '；
}
}
}
JayveeWong
投稿116篇原创文章赞不绝口123 访问量6万
私人信件
关注
标签：伸缩、跨度、删除、JavaScript、工作时间、className、菜单、li、open
资料来源： https://blog.csdn.net/weixin _ 42776111/article/details/104605846