实现二级菜单的伸缩功能的两种方法

VIP文章阮太太

于 2019-08-21 16:21:34 发布

阅读量1.6k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/99972373

版权

要求
1、点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+
如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单
2、页面中的二级菜单最多只能有一个是展开状态

方法一：

<html>
<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
	li{
		list-style:none;
	}
	li span {
		padding-left:20px;
		cursor:pointer;
	}
	.open{
		background:url("img/minus.png") no-repeat center left;
	}
	.closed{
		background: url("img/add.png") no-repeat center left;
	}
	.show{display:block;}
	.hide{display:none;}
	
</style>
<script type="text/javascript">

 window.onload = function (){
    var Allspan = document.getElementsByTagName('span');
    for(var i = 0 ; i<Allspan.length; i++){
            Allspan[i].onclick=function(){
             if(this.className =="open"){
             	this.className = "closed";
             	this.nextElem

最低0.47元/天解锁文章

阮太太

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
实现二级菜单的伸缩功能的两种方法

要求1、点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单2、页面中的二级菜单最多只能有一个是展开状态方法一： <html><head><title>1. 实现伸缩二级菜单</title><meta charset="utf-8" ...
复制链接

扫一扫