DIV+CSS+JS二级树型菜单,展开后刷新无影响

合集下载

Jquery树形菜单默认全部展开了,需要缩起,求解

本文由我司收集整编，推荐下载，如有疑问，请与我司联系Jquery 树形菜单默认全部展开了，需要缩起，求解个人网上下了一段Jquery 树形菜单代码，默认打开页面是全部展开的，需要全部缩起来，只显示第一级，求解修改哪里？!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN”“w3/TR/xhtml1/DTD/xhtml1-transitional.dtd”htmlxmlns=“w3/1999/xhtml”head metahttp-equiv=“Content- Type”content=“text/html;charset=utf-8”/title /title !--图标样式-- linkrel=“stylesheet”type=“text/css”href=“css/bootstrap.min.css”/!--主要样式-- linkrel=“stylesheet”type=“text/css”href=“css/style.css”/scripttype=“text/javascript”src=“js/jquery-1.7.2.min.js”/script scripttype=“text/javascript”$(function(){$(‘.treeli:has(ul)’).addClass(‘parent_li’).find(‘span’).attr(‘title’,’Collapsethisbranch’);$(‘.treeli.parent_li span’).on(‘click’,function(e){ varchildren=$(this).parent(‘li.parent_li’).find(‘ul li’);if(children.is(“:visible”)){children.hide(‘fast’);$(this).attr(‘title’,’Expandthisbranch’).find(‘i’).addClass(‘icon-plus-sign’).removeClass(‘icon-minus- sign’);}else{children.show(‘fast’);$(this).attr(‘title’,’Collapsethisbranch’).find(‘i’).addClass(‘icon-minus-sign’).removeClass(‘icon-plus-sign’);}e.stopPropagation(); });}); /script /head body div ul li span i /i Parent2 /span a href=“#” Test /a ul li spanstyle=““i /i Child /span a href=“#”Test /a /li li span i /i Child /span a href=“#” Test /a /li /ul /li li span i /i Parent2 /span a href=“#” Test /a ul li span i /i Child /span a href=“#” Test /a /li /ul /li li span i /i Parent2 /span /li /ul /div /body /html !DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN”“w3/TR/xhtml1/DTD/xhtml1-transitional.dtd”htmlxmlns=“w3/1999/xhtml”head metahttp-equiv=“Content- Type”content=“text/html;charset=utf-8”/title /title !--图标样式-- linkrel=“stylesheet”type=“text/css”href=“css/bootstrap.min.css”/!--主要样式-- linkrel=“stylesheet”type=“text/css”href=“css/style.css”/。

纯css实现多级折叠菜单折叠树效果

纯css实现多级折叠菜单折叠树效果1、运⽤checkbox的checked值来判断下级栏⽬是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执⾏你的CSS。

当有⼦菜单时，菜单项右侧有向下的箭头，当收起菜单项时，箭头朝上。

图⽚可以⾃⼰替换。

2、效果图3、代码⽚段<ol class="tree"><li><label for="folder1" class="folderOne">泽元框架</label> <input type="checkbox" id="folder1" /><ol><li><label for="subfolder1"class="folderTwo">开发规范</label> <input type="checkbox" id="subfolder1" /><ol><li class="file folderThree"><a href="#">常见界⾯错误举例</a></li><li class="file folderThree"><a href="#">关于发⾏报告对BUG管理提出…</a></li><li class="file folderThree"><a href="#">插件内部JAVA包命名规范</a></li></ol></li><li class="file folderTwo"><a href="#">概述</a></li><li class="file folderTwo"><a href="#">服务器集群</a></li><li class="file folderTwo"><a href="#">模板</a></li><li class="file folderTwo"><a href="#">安全机制</a></li></ol></li><li><label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" /><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li><label for="subfolder2" class="folderTwo">实时数据</label> <input type="checkbox" id="subfolder2" /><ol><li class="file folderThree"><a href="#">实时数据</a></li><li class="file folderThree"><a href="#">实时数据</a></li><li class="file folderThree"><a href="#">实时数据</a></li></ol></li></ol></li><li><label for="folder3" class="folderOne">ZAS</label> <input type="checkbox" id="folder3" /><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li><li><label for="folder4" class="folderOne">ZHTML标签</label> <input type="checkbox" id="folder4"/><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li><li><label for="folder5" class="folderOne">UI框架API⼿册</label> <input type="checkbox" id="folder5"/><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li></ol><style type="text/css">.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}/*隐藏input*/.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}/*所有菜单项设置统⼀样式*/.tree li {position: relative;list-style: none;}/*⼀级菜单加下边线*/.tree>li{border-bottom: 1px solid #d9d9d9;}/*给有⼦菜单的菜单项添加背景图标*/.tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-ov .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}/*清除所有展开的⼦菜单的display*/.tree li input + ol{display: none;}/*当input被选中时，给所有展开的⼦菜单设置样式*/.tree input:checked + ol {padding-left:14px;height: auto;display: block;}.tree input:checked + ol > li { height: auto;}/*末层菜单为A标签，设置样式*/.tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}.tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;}/*不同层级的菜单字体⼤⼩不同*/.tree .folderOne{font-size: 18px;}.tree .folderTwo{font-size:16px;}.tree .folderThree{font-size:14px;}</style><script type="text/javascript">$(document).ready(function() {//每个有⼦菜单的菜单项添加点击事件$(".tree label").click(function(){//获取当前菜单旁边input的check状态var isChecked = $(this).next("input[type='checkbox']").is(':checked');//展开和收齐的不同状态下更换右侧⼩图标if(isChecked){$(this).css("background-image","url(../images/cp-detail-arrow-b.png)");}else{$(this).css("background-image","url(../images/cp-detail-arrow-t.png)");}});});</script>下⾯介绍下CSS 菜单折叠先给⼤家展⽰效果图：如上，假设⼀级菜单是 div，⼆级菜单是 ul。

CSS3二级导航菜单制作步骤详解

动画定义好后，可以挺直将动画样式引用到 ul.submenu 上，注重，假如用法的是 animate.css，那么上述步骤将省略，挺直用其提供好的动画样式即可。
小程序微信企业站
第 9 页共 10 页
本文转载自中文网
第 10 页共 10 页
CSS3 二级导航菜单制作步骤详解
假如想要实现网页的二级导航，我们可以用法 JS 技术，动态的显示和躲藏二级菜单，固然也可以用法 CSS 技术来实现。并且这里推举用法 CSS，由于其效率更高，更流畅。这里将介绍二级菜单的动态显示与躲藏。 1 结构普通导航的主体我们主要是用法 ulli 标签
首页
background-color:ededed;
body{margin:0;font-size:14px;color:666}
}
ul,ol{margin:0;padding:0;list-style:none;}
/*一级导航浮动*/
a{text-decoration:none;color:666;}
ul.menu::after{
/*一级导航*/
content:&39;&39;;
第 4 页共 10 页
display:block; clear:both; } ul.menu>li{ float:left; width:120px; line-height:3em;
height:3em; text-align:center; cursor:pointer; } /*二级导航项分割线*/ ul.submenu{ /*默认躲藏*/
第 5 页共 10 页
display:none; } ul.submenu>li{ border-bottom:1pxsolidfff; } /*内容区*/ .content{

Vue2实现树形菜单（多级菜单）功能模块

Vue2实现树形菜单（多级菜单）功能模块结构⽰意图1. ├── index.html2. ├── main.js3. ├── router4. │└── index.js # 路由配置⽂件5. ├── components # 组件⽬录6. │├── App.vue # 根组件7. │├── Home.vue # ⼤的框架结构组件8. │├── TreeView.vue9. │├── TreeViewItem.vue10. │└── TreeDetail.vue11. ├── store12. ├── index.js # 我们组装模块并导出 store 的地⽅13. ├── modules # 模块⽬录14. └── menusModule.js # 菜单模块这个多级菜单实现的功能如下：1、可展⽰多级菜单，理论上可以展⽆限级菜单2、当前菜单⾼亮功能3、刷新后依然会⾃动定位到上⼀次点击的菜单，即使这个是⼦菜单，并且⽗菜单会⾃动展开4、⼦菜单的显⽰隐藏有收起、展开，同时带有淡⼊效果这个例⼦⽤到的知识点：路由、状态管理、组件。

状态管理安装：1. npm install --save vuex更多关于 vuex 的介绍可以看官⽅⽂档：。

我们先来看看效果演⽰图：程序员是⽤代码来沟通的，所以费话不多说，直接上码：index.html1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="utf-8">5. <meta name="viewport" content="width=device-width,initial-scale=1.0">6. <title>Vue 实现树形菜单（多级菜单）功能模块- 云库⽹</title>7. </head>8. <body>9. <div id="app"></div>10. </body>11. </html>main.js1. import Vue from 'vue'2. import App from './components/App'3. import router from './router'4. import store from './store/index'5. Vue.config.productionTip = false6. /* eslint-disable no-new */7. new Vue({8. el: '#app',9. router,10. store,11. components: {12. App13. },14. template: '<App/>'15. })在 main.js 中引⼊路由和状态管理配置App.vue1. <template>2. <div id="app">3. <Home></Home>4. </div>5. </template>6. <script>7. import Home from "./Home";8. export default {9. components: {10. Home11. },12. name: "App"13. };14. </script>15. <style>16. * {17. padding: 0;18. margin: 0;19. }20. #app {21. font-family: "Avenir", Helvetica, Arial, sans-serif;22. -webkit-font-smoothing: antialiased;23. -moz-osx-font-smoothing: grayscale;24. color: #2c3e50;25. }26. html,27. body,28. #app,29. .home {30. height: 100%;31. }32. html,33. body {34. overflow: hidden;35. }36. </style>Home.vue1. <template>2. <div class="home">3. <div class="side-bar">4. <Tree-view></Tree-view>5. </div>6. <div class="continer">7. <router-view></router-view>8. </div>9. </div>10. </template>11. <script>12. import TreeView from "./TreeView";13. export default {14. components: {15. TreeView16. },17. name: "Home"18. };19. </script>20. <style scoped>21. .side-bar {22. width: 300px;23. height: 100%;24. overflow-y: auto;25. overflow-x: hidden;26. font-size: 14px;27. position: absolute;28. top: 0;29. left: 0;30. }31. .continer {32. padding-left: 320px;33. }34. </style>这个 Home.vue 主要是⽤来完成页⾯的⼤框架结构。

树形菜单jsTree使用方法

树形菜单jsTree使⽤⽅法jsTree版本：3.0.4在 MVC中使⽤jsTreeModel：public class Department{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }}数据库：Controller：jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。

对于⼩的菜单可以⼀次性加载完，如果节点很多，可以按需加载（lazy loading）。

1、⼀次性加载完所有节点public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* ⼀次性加载完所有节点.* 前端只需配置 'data': {'url': '/Home/GetTreeData','dataType': 'json'* } 不⽤给服务端传值* 服务端不需写where*/var items=from item in db.Departmentselect new{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = };return Json(items, JsonRequestBehavior.AllowGet);}2、按需加载节点（lazy loading）public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* 异步加载节点（按需）前端需提供id传给服务端：'data': function (node) {return { id: node.id };}后端要在linq中加where筛选*/var items=from item in db.Departmentwhere item.PId == clickId // 在服务端要把所有上级节点找出来select new// 匿名类可以添加需要的字段，⽐如HasChildren{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = ,children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有⼦项};return Json(items, JsonRequestBehavior.AllowGet);}View：<div id="jstree">@section scripts{<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet"/><script src="~/Scripts/jstree/jstree.js"></script><script>$(document).ready(function () {$("#jstree").jstree({"core": {//'initially_open':["abc"],'data': {'url': '/Home/GetTreeData','dataType': 'json','data': function (node) { // 传给服务端点击的节点//return { id: node.id == "#" ? "0" : node.id };return { clickId: node.id };},success: function () {//alert('ok');}}}});// 展开节点$("#jstree").on("loaded.jstree", function (event, data) {// 展开所有节点//$('#jstree').jstree('open_all');// 展开指定节点//data.instance.open_node(1); // 单个节点（1 是顶层的id）data.instance.open_node([1, 10]); // 多个节点 (展开多个⼏点只有在⼀次性装载后所有节点后才可⾏） });// 所有节点都加载完后$("#jstree").on("ready.jstree", function (event, data) {//alert('all ok');data.instance.open_node(1); // 展开root节点//// 隐藏根节点 /questions/10429876/how-to-hide-root-node-from-jstree$("#1_anchor").css("visibility", "hidden");$("li#1").css("position", "relative")$("li#1").css("top", "-20px")$("li#1").css("left", "-20px")$(".jstree-last .jstree-icon").first().hide();});// 获得点击节点的id$('#jstree').on("changed.jstree", function (e, data) {console.log("The selected nodes are:");console.log(data.selected);alert('node.id is:' + data.node.id);alert('node.text is:'+data.node.text);console.log(data);// TODO: 传递给Tab//$.ajax({// 'url': 'Home/GetTreeData/',// 'data': { 'id': data.node.id }//});});});// end ready</script>根节点的⽗项是0，根节点只有⼀个，似乎显⽰出来也不好看：所以我们把它隐藏起来：PS:ready 和loaded 的区别：loaded.jstree: triggered after the root node is loaded for the first timeready.jstree : triggered after all nodes are finished loading参考：--End--。

divcss收缩展开导航

divcss收缩展开导航摘要：一、前言二、收缩展开导航的定义与作用三、使用CSS实现收缩展开导航的方法四、CSS样式设计及应用实例五、总结正文：收缩展开导航是一种常见的网页导航设计方式，通过点击导航按钮，可以实现导航菜单的收缩与展开，为用户提供方便快捷的导航体验。

本文将详细介绍如何使用CSS实现收缩展开导航。

首先，我们需要了解收缩展开导航的定义与作用。

收缩展开导航是一种交互式导航设计，能够根据用户的需求进行自适应调整，既节省页面空间，又能够提高用户体验。

接下来，我们将介绍使用CSS实现收缩展开导航的方法。

通常，我们可以采用以下两种方法：1.使用CSS的`:checked`伪类选择器与`input`元素结合。

通过将导航菜单的显示与隐藏与`input`元素的`checked`属性绑定，实现收缩展开导航的功能。

2.使用CSS的`:target`伪类选择器与`a`元素结合。

通过设置`a`元素的`target`属性，将导航菜单的显示与隐藏与目标页面的链接绑定，实现收缩展开导航的功能。

在了解方法后，我们将通过CSS样式设计及应用实例来进一步了解收缩展开导航的具体实现。

以下是一个简单的实例代码：```html<!DOCTYPE html><html><head><style>.nav-menu {display: none;}.nav-menu:target {display: block;}</style></head><body><nav><ul><li><a href="#nav1">导航1</a></li><li><a href="#nav2">导航2</a></li><li><a href="#nav3">导航3</a></li></ul></nav><div id="nav1" class="nav-menu"><h2>导航1</h2><p>这里是导航1的内容。

左侧树形菜单消失的解决方法

左侧树形菜单消失的解决方法1. 检查HTML和CSS代码，确保左侧树形菜单的元素与样式是否正确加载。

2. 使用浏览器开发者工具检查是否有错误的JavaScript代码或错误信息导致左侧树形菜单消失。

3. 确保左侧树形菜单的容器元素没有被隐藏或者被覆盖，可以通过检查CSS中的z-index属性来排除这种可能。

4. 确保左侧树形菜单的宽度和高度设置正确，避免因为尺寸问题而导致菜单消失。

5. 检查左侧树形菜单的定位方式，确认是否设定了正确的相对或绝对定位。

6. 确认左侧树形菜单是否被其他元素遮挡，可以通过调整z-index属性或调整元素位置来解决。

7. 检查左侧树形菜单所在的父容器的overflow属性，确保不会将菜单内容裁剪隐藏。

8. 使用浏览器兼容性工具检查是否有不同浏览器对左侧树形菜单的渲染问题，适当调整样式以解决兼容性问题。

9. 如果左侧树形菜单是通过JavaScript动态生成的，确认数据加载和菜单渲染逻辑是否正确。

10. 检查是否有事件监听器或触发器导致了左侧树形菜单在特定条件下消失，针对这些逻辑进行排查和修复。

11. 如果左侧树形菜单依赖于后端接口数据，确保接口返回的数据格式和内容正确，避免因为数据问题而导致菜单消失。

12. 修改左侧树形菜单的样式，例如背景色、边框等，以便于快速发现菜单的位置和状态。

13. 检查浏览器缓存是否导致菜单内容未能正确加载，适当清除浏览器缓存并重新加载页面。

14. 若左侧树形菜单涉及到页面切换或加载，确认页面跳转的逻辑是否导致菜单消失，可以尝试延迟菜单渲染的时机或进行预加载。

15. 调试页面的JavaScript代码，查看是否有其他脚本与左侧树形菜单的显示逻辑产生冲突。

16. 尝试使用不同的浏览器测试，以确认是否存在特定浏览器导致菜单消失的问题。

17. 确认左侧树形菜单相关的样式表是否正确引入，排查样式文件路径问题。

18. 检查页面布局是否存在响应式设计，可能是因为页面宽度变化导致左侧树形菜单消失。

JS+CSS实现DIV层的展开、收缩效果

JS+CSS实现DIV层的展开、收缩效果本⽂为⼤家分享的第⼀个实例：JS控制DIV层的展开、收缩效果。

<html><head><title>CSS+JS实现⼀个DIV层的展开/折叠效果</title><style>* { margin:0; padding:0;}body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99CC00} .class1 { width:40%; background:#CCCCCC; position:relative; margin:0 auto; padding:5px;}span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99CC00}#class1content { height:256px;overflow:hidden}</style><script>function $(element){return element = document.getElementById(element);}function $D(){var d=$('class1content');var h=d.offsetHeight;var maxh=300;function dmove(){h+=50; //层展开速度if(h>=maxh){d.style.height='300px';clearInterval(iIntervalId);}else{d.style.display='block';d.style.height=h+'px';}}iIntervalId=setInterval(dmove,2);}function $D2(){var d=$('class1content');var h=d.offsetHeight;var maxh=300;function dmove(){h-=50;//层收缩速度if(h<=0){d.style.display='none';clearInterval(iIntervalId);}else{d.style.height=h+'px';}}iIntervalId=setInterval(dmove,2);}function $use(){var d=$('class1content');var sb=$('stateBut');if(d.style.display=='none'){$D();sb.innerHTML='收缩';}else{$D2();sb.innerHTML='展开';}}</script></head><body><div class="class1"><span id="stateBut" onclick="$use()">收缩</span><p id="class1content">。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

DIV+CSS+JS二级树型菜单，展开后刷新无影响二级菜单，不论展开几个栏目，刷新不影响，原作中#nav li的背景色和背景图片分开写了，造成背景色不生效文章出处：标准之路(/css_example/715.shtml)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV+CSS+JS二级树型菜单，展开后刷新无影响</title><style type="text/css">#PARENT { width:174px; }</style></head><body><div id="PARENT"><ul id="nav"><li><a href="#Menu=ChildMenu1" onClick="DoMenu('ChildMenu1')">菜单一</a> <ul id="ChildMenu1" class="collapsed"><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li><li><a href=##Menu=ChildMenu1>菜单一</a></li></ul></li><li><a href="#Menu=ChildMenu2" onClick="DoMenu('ChildMenu2')">菜单二</a> <ul id="ChildMenu2" class="collapsed"><li><a href=##Menu=ChildMenu2>菜单二</a></li><li><a href=##Menu=ChildMenu2>菜单二</a></li><li><a href=##Menu=ChildMenu2>菜单二</a></li><li><a href=##Menu=ChildMenu2>菜单二</a></li><li><a href=##Menu=ChildMenu2>菜单二</a></li></ul></li><li><a href="#Menu=ChildMenu3" onClick="DoMenu('ChildMenu3')">菜单三</a> <ul id="ChildMenu3" class="collapsed"><li><a href=##Menu=ChildMenu3>菜单三</a></li><li><a href=##Menu=ChildMenu3>菜单三</a></li><li><a href=##Menu=ChildMenu3>菜单三</a></li><li><a href=##Menu=ChildMenu3>菜单三</a></li><li><a href=##Menu=ChildMenu3>菜单三</a></li><li><a href=##Menu=ChildMenu3>菜单三</a></li></ul></li><li><a href="#Menu=ChildMenu4" onClick="DoMenu('ChildMenu4')">菜单四</a> <ul id="ChildMenu4" class="collapsed"><li><a href=##Menu=ChildMenu4>菜单四</a></li><li><a href=#Menu=ChildMenu4>菜单四</a></li><li><a href=##Menu=ChildMenu4>菜单四</a></li><li><a href=##Menu=ChildMenu4>菜单四</a></li><li><a href=##Menu=ChildMenu4>菜单四</a></li><li><a href=##Menu=ChildMenu4>菜单四</a></li></ul></li><li><a href="#Menu=ChildMenu5" onClick="DoMenu('ChildMenu5')">菜单五</a> <ul id="ChildMenu5" class="collapsed"><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=#C#Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li><li><a href=##Menu=ChildMenu5>菜单五</a></li></ul></li><li><a href="#Menu=ChildMenu6" onClick="DoMenu('ChildMenu6')">菜单六</a> <ul id="ChildMenu6" class="collapsed"><li><a href=##Menu=ChildMenu6>菜单六</a></li><li><a href=##Menu=ChildMenu6>菜单六</a></li><li><a href=##Menu=ChildMenu6>菜单六</a></li></ul></li><li><a href="#Menu=ChildMenu7" onClick="DoMenu('ChildMenu7')">菜单七</a> <ul id="ChildMenu7" class="collapsed"><li><a href=##Menu=ChildMenu7>菜单七</a></li><li><a href=##Menu=ChildMenu7>菜单七</a></li></ul></li><li><a href="#Menu=ChildMenu8" onClick="DoMenu('ChildMenu8')">菜单八</a> <ul id="ChildMenu8" class="collapsed"><li><a href=##Menu=ChildMenu8>菜单八</a></li><li><a href=##Menu=ChildMenu8>菜单八</a></li><li><a href=##Menu=ChildMenu8>菜单八</a></li></ul></li><li><a href="#Menu=ChildMenu9" onClick="DoMenu('ChildMenu9')">菜单九</a><ul id="ChildMenu9" class="collapsed"><li><a href=##Menu=ChildMenu9>菜单九</a></li><li><a href=##Menu=ChildMenu9>菜单九</a></li><li><a href=##Menu=ChildMenu9>菜单九</a></li></ul></li><li><a href="#Menu=ChildMenu10" onClick="DoMenu('ChildMenu10')">菜单十</a> <ul id="ChildMenu10" class="collapsed"><li><a href=##Menu=ChildMenu10>菜单十</a></li></ul></li></ul></div><script type=text/javascript></script></html>文章出处：标准之路(/css_example/715.shtml)。