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

最新推荐文章于 2023-08-19 10:26:35 发布

阮太太

最新推荐文章于 2023-08-19 10:26:35 发布

阅读量1.7k

点赞数

分类专栏： web

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

版权

本文详细介绍了如何实现二级菜单的伸缩功能，包括两种不同的实现方式。点击一级菜单时，若二级菜单已展开则收起，图标变为+；若未展开则展开并切换为-图标，同时确保页面中只有一个二级菜单处于展开状态。

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

要求
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" ...
复制链接

扫一扫