伸缩菜单----html文件

运行结果：

程序代码：
html文件如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伸缩菜单</title>
<link rel="stylesheet" href="css/1.css" />//调用css
<script type="text/javascript" src="js/1-2.js"></script>//调用javascript
</head>
<body><div id="id1" class="closed" onclick="toggle(this)">菜单</div><ul class="hide"><ul class="tree"><li><span class="open" onclick="toggle(this)">考勤管理</span><ul class="show"><li>日常考勤</li><li>请假申请</li><li>加班/出差</li></ul></li><li><span class="closed" onclick="toggle(this)">信息中心</span><ul class="hide"><li>通知公告</li><li>公司新闻</li><li>规章制度</li></ul></li><li><span class="closed" onclick="toggle(this)">协同办公</span><ul class="hide"><li>公文流转</li><li>文件中心</li><li>内部邮件</li><li>即时通信</li><li>短信提醒</li></ul></li></ul></ul>
</body>
</html>

css文件如下：

li{list-style:none;
}
#id1{padding-left:20px;cursor:pointer;
}
li span{padding-left:20px;cursor:pointer;
}
.closed{background: url("../img/add.png")no-repeat center left;}//插入图片
.open{background: url("../img/minus.png")no-repeat center left;}//插入图片
.show{display:block;}
.hide{display:none;}

图片如下：

插入位置：

javascript文件：

function toggle(span){//1.当前打开状态，关闭if(span.className=="open"){span.className="closed";span.nextElementSibling.className="hide";}else{//2.当前为关闭状态，打开前先把已打开的关闭var openspan=document.querySelector("span[class='open']");if(openspan!=null){openspan.className="closed";openspan.nextElementSibling.className="hide";}span.className="open";span.nextElementSibling.className="show";}
}

控制某个标题打开或者某标题打开另两个标题关闭的相关代码在JavaScript中，可以进行相应更改，以达到自己想要的效果。

伸缩菜单----html文件相关推荐

Js+Css打造的红色经典伸缩菜单代码
代码简介: JS+Css伸缩菜单,红色,很好看.注:IE6下好像有点不正常,用的朋友自己修正下! 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
Win10系统新建菜单只有文件夹选项的处理方法
我们在使用电脑时经常会右键新建一些文件夹.文档或者表格之类的东西,但有时会遇到右键新建菜单内只有文件夹选项的情况,而且新建文件夹还提示没有权限.这是怎么回事呢?下面就为大家介绍一下Win10系统右键新 ...
如何设置公众号自定义菜单添加文件？
公众号自定义菜单:是一个目录型检索工具把用户需求整合,添加在公众号会话页面的底部能帮助用户自主.高效.迅速的找到想要的服务自定义菜单可设置的内容非常的多样最实用的还是添加文件,将企业介绍.产品 ...
关于android开发添加菜单XML文件之后无法在R.java中生成ID的问题
因为和同学分开做的android软件,现在想整合他做的界面部分,于是拷贝了res和src文件夹的文件,其中包括一个res.menu文件夹中的XML.但是每次将该文件导入到工程总无法自动在R.java中 ...
DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
(一).说明功能类似Windows 操作系统自带的记事本. 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开保存对话框等控件用法以及记事本菜单事件的具体代码) (二).图片示例 (三) ...
右键快捷菜单压缩文件的消失问题解决办法！
前一阵不知道为什么,突然发现右击压缩文件时,快捷菜单解压或压缩文件消失了,亲自实验了一下,希望可以帮到大家,加油! 打开压缩文件程序,菜单栏中选择"选项"--"设置&qu ...
vue实现伸缩菜单功能
先看效果: 点击图片按钮可调整菜单宽度伸缩后页面结构一共分为三部分,加上一个伸缩按钮,在你的项目对应的部分都加上class名. 我这里定义的分别是box.left.mid.resize(按钮类名) ...
[ahk]右键菜单打开文件所在文件夹（快捷方式也适用）
功能:能打开文件所在路径并定位到文件上,能正确解析lnk所指文件的目录. copypath.ahk 文件如下: #NoTrayIcon Clipboard=%1% openpath.ahk文件如下 ...

伸缩菜单----html文件

伸缩菜单----html文件相关推荐

最新文章

热门文章