CSS+JS仿QQ面板风格的多级折叠下拉菜单
2024-06-06 12:59:51
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style type="text/css">*{ margin:0px; padding:0px; border:0px; }body{ font-size:12px; color:#333;text-align:center;}.mbox{background:#73C2FF; width:184px; height:auto;}.mbox .m1{background:url(/imagesforcode/201211/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px;}.mbox .m2{background:url(/imagesforcode/201211/m2.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700; text-align:left;text-indent:19px;}.mbox .Test5study{ background:#fff;}.mbox .Test5study{text-align:left;width:182px;height:auto;overflow: hidden;}.mbox .Test5study h2{font-size:14px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer;}.mbox .Test5study h2 span{font-weight: normal;position:absolute;top:0;right:6px;}.mbox .Test5study li{border-bottom:dashed 1px #eee; line-height:22px;}.mbox .Test5study {border-bottom:solid 1px #A9DAFF;}.mbox .TxtList{ list-style:disc url(); padding:10px 0 10px 10px; height:200px; overflow-y:scroll;}</style><script language="javascript" id="clientEventHandlersJS"><!--var number=2;function LMYC() {var lbmc;//var treePic;for (i=1;i<=number;i++) {lbmc = eval('LM' + i);//treePic = eval('treePic'+i);//treePic.src = 'images/file.gif';
lbmc.style.display = 'none';}}function ShowFLT(i) {lbmc = eval('LM' + i);//treePic = eval('treePic' + i)if (lbmc.style.display == 'none') {LMYC();//treePic.src = 'images/nofile.gif';
lbmc.style.display = '';}else {//treePic.src = 'images/file.gif';
lbmc.style.display = 'none';}}//--></script></head><body><div class="mbox"><div class="m1" ><a onClick="javascript:ShowFLT(1)" href="javascript:void(null)" style="text-decoration:none; color:#4B6486">标题1</a></div><div id="LM1" style="DISPLAY: none"><div id="Test5study" class="Test5study"><h2 id="t1" onClick="ShHi('t1','h1');">传说中的标题</h2><ul class="TxtList" id="h1" ><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t2" onClick="ShHi('t2','h2');">传说中的标题</h2><ul class="TxtList" id="h2" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t3" onClick="ShHi('t3','h3');">传说中的标题</h2><ul class="TxtList" id="h3" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t4" onClick="ShHi('t4','h4');">传说中的标题</h2><ul class="TxtList" id="h4" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul></div></div></div><div class="mbox"><div class="m1" ><a onClick="javascript:ShowFLT(2)" href="javascript:void(null)" style="text-decoration:none; color:#4B6486">标题2</a></div><div id="LM2" style="DISPLAY: none"><div id="Test5study" class="Test5study"><h2 id="t5" onClick="ShHi('t5','h5');">传说中的标题2</h2><ul class="TxtList" id="h5" ><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t6" onClick="ShHi('t6','h6');">传说中的标题2</h2><ul class="TxtList" id="h6" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t7" onClick="ShHi('t7','h7');">传说中的标题2</h2><ul class="TxtList" id="h7" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul><h2 id="t8" onClick="ShHi('t8','h8');">传说中的标题2</h2><ul class="TxtList" id="h8" style="display:none;"><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li><li>春天的脚步越来越近了</li></ul></div></div></div><script type="text/javascript">function $(d){return document.getElementById(d);}function f(d){var t=$(d);if (t){return t.style;}else{return null;}}function Hi(){var items = document.getElementsByTagName("ul");for (var i=0;i<items.length;i++){items[i].style.display='none';}}function Hl(){var iteml = document.getElementsByTagName("h2");for (var j=0;j<iteml.length;j++){iteml[j].style.fontWeight='normal';}}function h(d){var s=f(d);var b=s.display;if (b=='none'){return true;}else{return false;}}function ShHi(ii,jj){if(h(jj)){Hl();Hi();f(jj).display='block';f(ii).fontWeight='bold';}else{Hl();Hi();f(jj).display='none';f(ii).fontWeight='normal';}}</script></body></html><div style="height:100px;"></div><br>需要用到两个小图片：<a href="/imagesforcode/201211/m1.gif" target=_blank>m1.gif</a>、<a href="/imagesforcode/201211/m2.gif" target=_blank>m2.gif</a><br><hr>
转载于:https://www.cnblogs.com/zhaozzm/p/4441166.html
CSS+JS仿QQ面板风格的多级折叠下拉菜单相关推荐
- JS+CSS打造仿QQ面板的三级折叠下拉菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- [css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
- 动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
- 多级手风琴下拉菜单插件metisMenu.js
下载地址 metisMenu.js是一个纯JavaScript导航菜单插件,可以帮助你创建响应式,动画,手风琴/下拉菜单导航.主要特色光滑的折叠/展开动画.启用AJAX.兼容的桌面和移动.事件处理程序 ...
- 多级联动下拉菜单插件：jquery.cxselect.js
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...
- EXCEL如何实现多级联动下拉菜单
原文地址:http://jingyan.baidu.com/article/5553fa82035ce565a23934ba.html 临近年末,工作比较忙,也有一段时间没有写一些经验分享了,打开hi ...
- 仿QQ多级折叠、展开菜单，三级下拉导航
仿QQ多级折叠.展开菜单,三级下拉导航 仿QQ面板风格的多级折叠.展开菜单,三级下拉导航,JavaScript+CSS共同结晶的结果,推荐给大家,点击"运行"可查看效果. http ...
- qml中使用combobox实现多级菜单_Excel教程：还不会做Excel三级下拉菜单？其实它跟复制粘贴一样简单...
关注回复[目录]学习113篇Excel教程 全套Excel视频教程,扫码观看 编按: 哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的 ...
- qml中使用combobox实现多级菜单_excel实用技巧：如何构建多级下拉菜单
编按:哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的下拉菜单,可能就有点蒙圈了.其实用Excel制作三级下拉菜单,一点都不难,它就跟 ...
最新文章
- 《编程之美》读书笔记08：2.9 Fibonacci序列
- IntelliJ IDEA自动部署
- AOJ GRL_1_A: Single Source Shortest Path （Dijktra算法求单源最短路径，邻接表）
- ios新手开发——toast提示和旋转图片加载框
- 使用自定义表类型（SQL Server 2008）
- 【转】TcpListener和tcpclient使用
- tmpfs——Linux的一种虚拟内存文件系统
- 蔡俊锋 web API 开发规范
- Ubuntu16安装OpenStack
- python标准库abc的实用技巧
- STM32F107的时钟设置
- Vue 视频音频播放
- 算法注册机编写扫盲---第二课
- OLED、QLED、miniled、microled的区别与优劣势是什么？(非商业转载）
- 负载均衡技术之负载均衡器简介
- Java log日志
- Flash Play 闪玩
- mac hdmi 不能调整音量_有史以来最贵的苹果Mac笔记本，PowerBook 5300ce（1995）体验...
- Idea如何统计代码行数
- 2021-05-11sql server导入外部mdf文件发生报错
热门文章
- 从0到1 拿下C语言——绪论（计算机的组成、进制转换、算法表示、程序结构、C语言基本词汇）
- 《自然语言处理学习之路》05 新闻分类任务实战
- win7计算机收藏夹位置,win7中收藏夹在哪里 win7找到IE收藏夹的两种方法[多图]
- 手机电脑卖不动，AR\VR和自动驾驶也不给力；苹果的未来在哪里？
- 诺基亚n1支持java功能_诺基亚(NOKIA)N1平板电脑按键及接口评测-ZOL中关村在线
- 火了：一只蝙蝠的自述
- nasmc++ 读取FAT12文件系统
- 从0到1 手把手搭建spring cloud alibaba 微服务大型应用框架（三） (mini-cloud) 搭建认证服务（认证/资源分离版） oauth2.0 (中)
- 栈和队列OJ练习——栈实现队列，队列实现栈
- python数据分析案例2-1：Python练习-Python爬虫框架Scrapy入门与实践