CSS+JS打造的可折叠展开的菜单

JS三级可折叠菜单实现方法

本文实例讲述了JS三级可折叠菜单实现方法。

分享给大家供大家参考，具体如下：.ASPX代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head runat="server">  <title>无标题页</title>  <script type="text/javascript" src="JScript.js" ></script>  <style type="text/css">*{ margin: 0px; padding: 0px; border:0px;}#nav{ width: 600px; margin: 0px; padding: 0px; font-size: 14px; line-height: 30px;}#nav li{ width: 180px; padding-left: 20px; padding-bottom: 1px; list-style-image: none; list-style-type: none; background-color: #FFFFFF;}#nav a{ padding-left: 20px; background-color: #BFBFBF; display: block; text-decoration: none;}#nav a:hover { background-color: #FF9175;}#nav li ul{ padding-top: 1px; list-style-image: none; list-style-type: none;}#nav li li{ padding-left: 0px;}#nav ul a{ background-color: #EBEBEB;}.cx { display:none; visibility:hidden;}.ex { display:inherit; visibility:inherit;}</style><script type="text/javascript" > window.onload=function(){ statUp(); }</script></head><body><form id="form1" runat="server"><div id="Parent"><ul id="nav"><li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单1</a> <ul> <li><a href="javascript:void(0);">菜单1_1</a></li> <li><a href="javascript:void(0);">菜单1_2</a></li> </ul></li><li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单2</a> <ul> <li><a href="javascript:void(0);" onclick="doMenu(this,'2')" >菜单2_1</a> <ul> <li>菜单2_1_1</li> <li>菜单2_1_2</li> </ul> </li> <li><a href="javascript:void(0);" onclick="doMenu(this,'2')">菜单2_2</a>  <ul> <li>菜单2_2_1</li> </ul> </li> </ul></li></ul></div></form></body></html>js文件代码：function doMenu(obj,strDeep){ var items=obj.parentNode.getElementsByTagName("ul"); //获取a 对象你节点li 下包含的所有ul集合 var itmUl; var deeps=strDeep; //strDeep 为当前菜单的级数 if(items.length>0){ itmUl=items[0]; alert(itmUl); } if(itmUl.className!="ex"){ cxAll();//当前节点为关闭状态时,先执行关闭所有ul子菜单 if(deeps=='2'){ //若要展开三级菜单当,还要将其二级父菜单展开 itmUl.parentNode.parentNode.className="ex"; } itmUl.className="ex"; //展开下级菜单 }else{ itmUl.className="cx"; }}function statUp(){ cxAll(); var ulDom=document.getElementById("nav"); var items=ulDom.getElementsByTagName("ul");}function cxAll(){ var ulDom=document.getElementById("nav"); var items=ulDom.getElementsByTagName("ul"); for (var i=0;i<items.length;i++) { items[i].className="cx"; }}希望本文所述对大家JavaScript程序设计有所帮助。

divcss收缩展开导航

divcss收缩展开导航
（实用版）
目录
1.导航栏的作用和重要性
2.Div+Css 的定义和特点
3.收缩展开导航的实现方法
4.收缩展开导航的优点和应用场景
5.结论
正文
导航栏是网站建设中不可或缺的一个重要组成部分，它能够帮助用户快速找到所需信息，提高用户体验。

在众多的导航栏设计中，收缩展开导航因其独特的视觉效果和便捷性，越来越受到设计师和用户的喜爱。

Div+Css 是一种用于网页设计的技术，Div 代表元素，Css 代表样式。

这种技术可以将网页中的元素和样式分离，使网页的前期制作和后期维护都变得更加简便。

收缩展开导航就是利用 Div+Css 技术实现的一种导航栏设计，它具有响应式、灵活性和易维护等优点。

收缩展开导航的实现方法通常是，在导航栏的一级菜单上添加一个收缩图标，当用户点击这个图标时，导航栏的二级菜单会自动展开或收缩。

这种设计不仅节省了空间，还提高了导航栏的美观度。

收缩展开导航的优点和应用场景很多。

首先，它节省了空间，尤其适用于移动端设备，可以让用户在有限的屏幕空间内看到更多的内容。

其次，它具有很好的视觉效果，可以提高网站的美观度。

最后，它易于维护，当需要修改导航栏的内容时，只需要修改 Css 样式即可，无需改动 HTML 代码。

第1页共1页。

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的内容。

CSS实现单选折叠菜单功能

CSS实现单选折叠菜单功能不到万不得已的时候千万别引⼊前端UI框架，因为HTML5和CSS3已经能实现绝⼤多数的功能，⽐如上期的《CSS实现最简洁的开关》⽽很多⼈的思维还停留在web2.0时代，⽤各种库来做UI，导致⽹页臃肿。

今天教⼤家⽤纯css实现⼀个单选的折叠菜单，不需要JavaScript就能⽤。

折叠菜单和标签页差不多，逻辑上都是⼀种单选⾯板，只不过折叠菜单⼀般是垂直堆叠的，标签页是横着排列。

标签页：既然是单选的，就可以⽤<input type="radio">单选按钮来实现。

⾸先这些单选按钮组的⽗元素⽤<form>，因为<form>可以监听按钮组的变化，同时还能通过name属性直接得到RadioNodeList列表和变化值，⾮常⽅便，不⽤设置其他的css选择器了。

所以这个折叠菜单的html如下：<form id="form"><input type="radio" name="collapse"><div></div><input type="radio" name="collapse"><div></div><input type="radio" name="collapse"><div></div></form>给<form>设置id，这样可以直接通过window[id]找到它，每个<radio>的name属性要⼀致，然后通过form[name]得到单选组，form[name].value就是当前选中的按钮的value，也就是折叠按钮的标题，每个<radio>后⾯跟着⼀个<div>就是菜单展开的内容。

CSS+JS打造的可折叠展开的菜单

<!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>CSS+JS打造的可折叠展开的菜单丨芯晴网页特效丨</title></head><body><style type="text/css">.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#ECECFF;color:#000000;width:140px;padding:2px;text-align:center;font-weight:bold;/*/*/border:1px solid #000000;/* */}.submenu{margin-bottom: 0.5em;}</style><script type="text/javascript">if (document.getElementById){ // changedocument.write('<style type="text/css">\n')document.write('.submenu{display: none;}\n')document.write('</style>\n')}function SwitchMenu(obj){if(document.getElementById){var el = document.getElementById(obj);var ar = document.getElementById("masterdiv").getElementsByTagName("span"); // changeif(el.style.display != "block"){ // changefor (var i=0; i<ar.length; i++){if (ar[i].className=="submenu") // changear[i].style.display = "none";}el.style.display = "block";}else{el.style.display = "none";}}}</script><div id="masterdiv"><div class="menutitle" onclick="SwitchMenu('sub1')"></div><span class="submenu" id="sub1">- <a href="/">网页特效</a><br>- <a href="/">七彩影视</a><br>- <a href="/">生活常识</a><br>- <a href="/">珊珊影视</a><br>- <a href="/">链接平台</a><br>- <a href="/">月付主机</a><br>- <a href="/">七彩动漫</a><br>- <a href="/">七彩搜电影</a><br>- <a href="/">分类目录</a><br></span><div class="menutitle" onclick="SwitchMenu('sub2')">网页特效①</div><span class="submenu" id="sub2">- <a href="/html/txdm/cddh/" title="">菜单导航特效</a><br> - <a href="/html/txdm/tcys/" title="">图层样式特效</a><br> - <a href="/html/txdm/ljwb/" title="">链接文本特效</a><br> - <a href="/html/txdm/txtx/" title="">图形图像特效</a><br> - <a href="/html/txdm/sbtx/" title="">鼠标特效代码</a><br> - <a href="/html/txdm/ymck/" title="">页面窗口特效</a><br> </span><div class="menutitle" onclick="SwitchMenu('sub3')">网页特效②</div><span class="submenu" id="sub3">- <a href="/html/txdm/wybj/" title="">网页背景特效</a><br> - <a href="/html/txdm/rqsj/" title="">日期时间特效</a><br> - <a href="/html/txdm/ymss/" title="">页面搜索特效</a><br> - <a href="/html/txdm/bgtx/" title="">表格表单特效</a><br> - <a href="/html/txdm/qtdm/" title="">其他网页特效</a><br> </span><div class="menutitle" onclick="SwitchMenu('sub4')">生活常识网</div><span class="submenu" id="sub4">- <a href="/html_cs/shenghuochangshi/">生活常识</a><br> - <a href="/html_cs/jiankangzhishi/">健康知识</a><br>- <a href="/html_cs/meirongshoushen/">美容瘦身</a><br>- <a href="/html_cs/meirongshoushen/jianfeishoushen/">减肥瘦身</a><br>- <a href="/html_cs/meirongshoushen/meironghufu/">美容护肤</a><br>- <a href="/html_cs/yinshichangshi/">饮食常识</a><br>- <a href="/html_cs/yangshengzhidao/">养生之道</a><br>- <a href="/html_cs/diannaozhishi/">电脑知识</a><br>- <a href="/html_cs/touzilicai/">投资理财</a><br>- <a href="/html_cs/fushichangshi/">服饰常识</a><br>- <a href="/html_cs/shejiaoliyi/">社交礼仪</a><br></span></div></body></html>。

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">。

可折叠展开导航栏写法

可折叠展开导航栏写法可折叠展开导航栏是一种常见的网页设计元素，用于在有限的空间内显示大量的导航链接。

下面是一种常见的可折叠展开导航栏的写法。

HTML部分：html.<div class="navbar">。

<button class="navbar-toggle">菜单</button>。

<nav class="navbar-collapse">。

<ul>。

<li><a href="#">链接1</a></li>。

<li><a href="#">链接2</a></li>。

<li><a href="#">链接3</a></li>。

<li><a href="#">链接4</a></li>。

</ul>。

</nav>。

</div>。

CSS部分：css..navbar-toggle {。

display: none;}。

.navbar-collapse {。

display: flex;}。

.navbar-collapse ul {。

list-style: none;margin: 0;padding: 0;display: flex;}。

.navbar-collapse ul li {。

margin: 0 10px;}。

@media (max-width: 768px) {。

.navbar-toggle {。

display: block;}。

.navbar-collapse {。

HTML+CSS结构鼠标点击折叠展开折叠式菜单

HTML+CSS结构鼠标点击折叠展开折叠式菜单<!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=utf-8" /><title>HTML+CSS结构鼠标点击折叠展开折叠式菜单</title><meta content="" name="keywords" /><meta name="keywords" content="国外网页设计欣赏,CSS导航菜单,FLSH焦点图,网页特效" /><meta name="description" content="懒人建站为您提供-JS广告代码，CSS导航菜单，FLSH 焦点图片代码，国外网页设计欣赏与模板和CSS技巧。

" /><style type="text/css">dl,dt,dd,h5,p{padding:0px;margin:0px;font-size:10pt;}dl{width:80%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:10.5pt;cursor:pointer;text-decoration: none;}dt a:hover{text-decoration: underline;color: #FF0000;}dd,p{text-indent: 2em;}</style></head><body><script>var number=5; //定义条目数function LMYC() {var lbmc;for (i=1;i<=number;i++) {lbmc = eval('LM' + i);lbmc.style.display = 'none';}}function ShowFLT(i) {lbmc = eval('LM' + i);if (lbmc.style.display == 'none') {LMYC();lbmc.style.display = '';}else {lbmc.style.display = 'none';}}</script><dl><dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">如何检索</a></dt><dd id=LM1 style="DISPLAY: none"><h5><a href="#"> HTML+CSS模板</a></h5><p>我们为您提供-HTML+CSS模板，JS代码，网页图标，网页欣赏模板，SEO优化和各种建站技巧；</p></dd><dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">如何添加计划</a></dt><dd id=LM2 style="DISPLAY: none"><h5>月度计划的操作</h5><p>单击添加计划按钮或工具栏上的添加按钮，弹出添加计划窗体，选择要添加计划的分类，年度、月份后单击确定按钮。

js实现简单折叠、展开菜单的方法

js实现简单折叠、展开菜单的⽅法本⽂实例讲述了js实现简单折叠、展开菜单的⽅法。

分享给⼤家供⼤家参考。

具体如下：这⾥介绍的是意乱会折叠、展开的菜单导航栏，很⽼时候写的，CSS没有做美化，如果想⽤的朋友就⾃⼰美化吧。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<html><script>function show(c_Str){if(document.all(c_Str).style.display=='none'){document.all(c_Str).style.display='block';}else{document.all(c_Str).style.display='none';}}function high(){if (event.srcElement.className=="k"){event.srcElement.style.background="336699"event.srcElement.style.color="white"}}function low(){if (event.srcElement.className=="k"){event.srcElement.style.background="99CCFF"event.srcElement.style.color=""}}</script><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>导航栏</title><style>td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; font-size: 10pt }li{ color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}.up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 } </style></head><body topmargin="0" leftmargin="5"><div align="left"><table border="0" width="48" cellspacing="0" cellpadding="0"><tr><td><div class=up onclick=show("a0")>+01-10</div><div onmouseover=high() onmouseout=low() id=a0 style="display:none"><li class=k>01</li><li class=k>02</li><li class=k>03</li><li class=k>04</li><li class=k>04</li><li class=k>05</li><li class=k>06</li><li class=k>07</li><li class=k>08</li><li class=k>09</li><li class=k>10</li></div></td></tr><tr><td><div class=up onclick=show("a1")>+11-20</div><div onmouseover=high() onmouseout=low() id=a1 style="display:none"><li class=k>11</li><li class=k>12</li><li class=k>13</li><li class=k>14</li><li class=k>15</li><li class=k>16</li><li class=k>17</li><li class=k>18</li><li class=k>19</li><li class=k>20</li></div></td></tr><tr><td><div class=up onclick=show("a2")>+21-30</div><div onmouseover=high() onmouseout=low() id=a2 style="display:none"> <li class=k>21</li><li class=k>22</li><li class=k>23</li><li class=k>24</li><li class=k>25</li><li class=k>26</li><li class=k>27</li><li class=k>28</li><li class=k>29</li><li class=k>30</li></div></td></tr><tr><td><div class=up onclick=show("a3")>+31-40</div><div onmouseover=high() onmouseout=low() id=a3 style="display:none"> <li class=k>31</li><li class=k>32</li><li class=k>33</li><li class=k>34</li><li class=k>35</li><li class=k>36</li><li class=k>37</li><li class=k>38</li><li class=k>39</li><li class=k>40</li></div></td></tr><tr><td><div class=up onclick=show("a4")>+41-50</div><div onmouseover=high() onmouseout=low() id=a4 style="display:none"> <li class=k>41</li><li class=k>42</li><li class=k>43</li><li class=k>44</li><li class=k>45</li><li class=k>46</li><li class=k>47</li><li class=k>48</li><li class=k>49</li><li class=k>50</li></div></td></tr><tr><td><div class=up onclick=show("a5")>+51-60</div><div onmouseover=high() onmouseout=low() id=a5 style="display:none"> <li class=k>51</li><li class=k>52</li><li class=k>53</li><li class=k>54</li><li class=k>55</li><li class=k>56</li><li class=k>57</li><li class=k>58</li><li class=k>59</li><li class=k>60</li></div></td></tr><tr><td><div class=up onclick=show("a7")>+61-70</div><div onmouseover=high() onmouseout=low() id=a7 style="display:none"> <li class=k>61</li><li class=k>62</li><li class=k>63</li><li class=k>64</li><li class=k>65</li><li class=k>66</li><li class=k>67</li><li class=k>68</li><li class=k>69</li><li class=k>70</li></div></td></tr><tr><td><div class=up onclick=show("a8")>+71-80</div><div onmouseover=high() onmouseout=low() id=a8 style="display:none"> <li class=k>71</li><li class=k>72</li><li class=k>73</li><li class=k>74</li><li class=k>75</li><li class=k>76</li><li class=k>77</li><li class=k>78</li><li class=k>79</li><li class=k>80</li></div></td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

JS实现无限级网页折叠菜单（类似树形菜单）效果代码

JS实现⽆限级⽹页折叠菜单（类似树形菜单）效果代码本⽂实例讲述了JS实现⽆限级⽹页折叠菜单(类似树形菜单)效果代码。

分享给⼤家供⼤家参考。

具体如下：这是⼀款超不错的⽹页折叠菜单，采⽤JavaScript实现。

折叠菜单是⼤家⽐较常见到的⼀种菜单形式，可⼴泛应⽤于管理系统、后台左侧、产品列表中，本折叠菜单有点树形菜单的味道，相信“⽆限级”会满⾜你的要求。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<html><head><title>⽆限级折叠菜单JS版</title><style></style></head><body><div id="menu"><h3>⽆限级折叠菜单JavaScript版</h3><ul><li><em></em><a href='javascript:void(0);'>菜单_1_1</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_1_2</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li></ul><script type="text/javascript">(function(e){for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){ em.onclick = function(){ //onmouseovervar ul = this.nextSibling;if(!ul){return false;}ul = ul.nextSibling; if(!ul){return false;}if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制隐藏或删除该⾏for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){if(li.tagName=="LI"){for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){switch($ul.tagName){case "UL":$ul.className = $ul!=ul?"" : ul.className?"":"off";break;case "EM":$ul.className = $ul!=this?"" : this.className?"":"off";break;}}}}}}})({id:'menu',tag:'em'});</script></body></html>希望本⽂所述对⼤家的JavaScript程序设计有所帮助。

纯CSS打造可折叠树状菜单

纯CSS打造可折叠树状菜单1：Html代码<li><label for="subsubfolder1">下级</label><input id="subsubfolder1" type="checkbox" /><ol><li class="file"><a>下级</a></li><li><label for="subsubfolder2">下级</label><input id="subsubfolder2" type="checkbox" /><ol><li class="file"><a>⽆限级</a></li><li class="file"><a>⽆限级</a></li><li class="file"><a>⽆限级</a></li><li class="file"><a>⽆限级</a></li><li class="file"><a>⽆限级</a></li><li class="file"><a>⽆限级</a></li></ol></li></ol></li>实现的思路是运⽤checkbox的checked值来判断下级栏⽬是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执⾏你的CSS。

折叠菜单实验报告总结(3篇)

第1篇一、实验背景随着互联网技术的飞速发展，前端页面设计逐渐追求简洁、高效。

折叠菜单作为一种流行的页面布局元素，能够在有限的空间内展示更多的信息，提高用户体验。

本次实验旨在通过HTML、CSS和JavaScript技术实现一个可折叠的多层级菜单，并对其实施优化。

二、实验目的1. 掌握HTML、CSS和JavaScript在实现折叠菜单方面的应用；2. 学习并运用事件监听、样式切换等前端技术；3. 分析并优化折叠菜单的性能和用户体验。

三、实验原理1. HTML：使用ul和li标签构建菜单结构，为每个菜单项添加类名或id，以便在CSS和JavaScript中引用；2. CSS：通过设置菜单项的样式，实现菜单的折叠和展开效果；3. JavaScript：为菜单项添加点击事件监听器，根据用户操作切换菜单项的展开状态。

四、实验步骤1. 创建HTML结构：使用ul和li标签构建菜单结构，并为每个菜单项添加类名或id；2. 编写CSS样式：定义菜单项的显示效果，包括颜色、背景、宽度等，同时设置折叠和展开状态下的样式；3. 编写JavaScript代码：为菜单项添加点击事件监听器，根据用户操作切换菜单项的展开状态；4. 优化性能：分析代码，去除不必要的重复操作，提高代码执行效率；5. 优化用户体验：调整菜单项的响应速度，优化动画效果，提高用户操作的舒适度。

1. 成功实现了一个可折叠的多层级菜单；2. 菜单项在点击后能够正确地折叠和展开；3. 优化了代码性能，提高了页面加载速度；4. 菜单项的响应速度和动画效果得到了优化，用户体验得到提升。

六、实验总结1. 通过本次实验，掌握了HTML、CSS和JavaScript在实现折叠菜单方面的应用，提高了自己的前端技能；2. 学会了事件监听、样式切换等前端技术，为以后的项目开发积累了经验；3. 分析并优化了折叠菜单的性能和用户体验，为实际项目中的应用提供了参考；4. 在实验过程中，发现了一些问题和不足，例如菜单项的响应速度不够快、动画效果不够流畅等，需要在以后的学习和实践中继续改进。

折叠式菜单的实现原理

折叠式菜单的实现原理折叠式菜单是一种常见的网页或移动应用界面设计，它可以使用户在有限的空间内访问多个选项。

折叠式菜单的实现原理可以通过以下几个方面来解释：1. HTML和CSS结构：折叠式菜单的实现离不开HTML和CSS。

HTML用于组织菜单项的结构，包括菜单组和菜单项。

CSS负责设置菜单项的样式以及控制菜单项的显示和隐藏。

通过HTML和CSS的结构和样式设置，实现了基本的折叠式菜单。

2. JavaScript控制：为了实现菜单项的折叠和展开功能，需要借助JavaScript 来控制菜单的交互行为。

通常，通过给菜单项绑定点击事件来触发相应的菜单状态改变。

点击菜单项时，利用JavaScript代码来切换菜单项的折叠状态，从而实现菜单项的显示和隐藏。

3. 样式切换和过渡效果：为了让用户更好地感知菜单项的状态变化，可以通过添加样式切换和过渡效果来提升用户体验。

通过给菜单项添加特定的CSS类，并使用过渡效果，可以在菜单项的显示和隐藏过程中，让用户感受到平滑的过渡效果。

4. 媒体查询和响应式设计：随着移动设备的普及，响应式设计成为了很重要的一环。

为了适应不同屏幕尺寸的设备，折叠式菜单通常会使用媒体查询来设置不同的样式和布局。

通过媒体查询，可以根据屏幕尺寸的不同，切换菜单的显示方式，例如在小屏幕上以按钮形式呈现，通过点击按钮来展开菜单项。

5. 动态数据加载：如果折叠式菜单的内容较多或者是从后台动态获取的，那么还需要通过异步请求数据的方式来实现。

通过使用AJAX或其他前端框架，可以在用户与菜单项交互时，动态加载和更新菜单的内容。

总结起来，折叠式菜单的实现原理是通过HTML和CSS设置菜单的基本结构和样式，通过JavaScript控制菜单项的折叠和展开状态，通过样式切换和过渡效果提升用户体验，通过媒体查询和响应式设计适配不同屏幕尺寸的设备，以及通过动态数据加载获取和更新菜单内容。

这些方面的综合运用，才能实现一个功能齐全、交互友好的折叠式菜单。

原生js+css实现二级伸缩菜单

原⽣js+css实现⼆级伸缩菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>原⽣js实现⼆级伸缩菜单</title><style>*{margin:0;padding:0;}ul,li{list-style: none;}.closed{display: block;width: 200px;background-color: coral;}#manager ul li{width: 200px;line-height: 30px;text-align: center;cursor: pointer;}.hide{display: none;}.show{display: block;}.open{display: block;background-color: coral;}.hide{display: none;}#manager ul li.pro{border:1px solid #fff;}#manager ul li ul li{padding:3px 0;border: 0;color:lightgray;line-height: 20px;border-top:1px solid #fff;background-color: darkorchid;}#manager ul li ul li:hover{color: #fff;}#manager ul li ul li:last-child{border-bottom:1px solid #fff;}</style></head><body><div id="manager"><ul class="tree"><li class="pro"><span class="open" onclick="toggleTable(this)">考勤管理</span><ul class="show"><li>⽇常考勤</li><li>请假申请</li><li>加班/出差</li></ul></li><li class="pro"><span class="closed" onclick="toggleTable(this)">信息中⼼</span><ul class="hide"><li>通知公告</li><li>公司新闻</li><li>规章制度</li></ul></li><li class="pro"><span class="closed" onclick="toggleTable(this)">协同办公</span><ul class="hide"><li>公⽂流转</li><li>⽂件中⼼</li><li>内部邮件</li><li>即时通讯</li><li>短信提醒</li></ul></li><li class="pro"><span class="closed" onclick="toggleTable(this)">合同管理</span><ul class="hide"><li>内部合同</li><li>外部合同</li><li>到期合同</li><li>未签合同</li><li>保密合同</li></ul></li><li class="pro"><span class="closed" onclick="toggleTable(this)">⼈事流程</span><ul class="hide"><li>⼈事⼊职</li><li>职⼯保险</li><li>职⼯升值</li><li>薪资计划</li><li>员⼯福利</li></ul></li><li class="pro"><span class="closed" onclick="toggleTable(this)">客户管理</span><ul class="hide"><li>企业客户</li><li>⼀般客户</li><li>重要客户</li><li>⼩区客户</li><li>外地客户</li></ul></li></ul></div><script src="js/jquery-3.2.1.min.js"></script><script>function toggleTable(span){// 如果span的class为openif(span.className=="open"){// 将span的class设为closedspan.className="closed";// 将span的下⼀个兄弟元素的class改为hidespan.nextElementSibling.className="hide";}else{//否则// 查找class为tree的元素下的⼀个class为open的span,保存在open中var open=document.querySelector("[class=tree] span[class=open]");if(open!=null){// 设置open的class为closedopen.className="closed";// 设置open的下⼀个兄弟元素的class为hideopen.nextElementSibling.className="hide";}span.className="open";span.nextElementSibling.className="show";}}</script></body></html>。

JS折叠菜单实例方法简单实用

JS折叠菜单实例方法简单实用<style type="text/css">.mainDiv{width:160px;}.topItem{width:160px;height:22px;cursor:pointer;background: #467BF2;text-decoration: none;color: white;font-weight:bold;font-family:"GOTHIC";}.dropMenu{background:#D9D9D9;border-top:1px solid #467BF2;border-left:1px solid #92B1F8;border-right:1px solid #92B1F8;border-bottom:1px solid #92B1F8;}.subMenu{display:none;}.subItem{padding-left:5px;cursor:pointer;font-weight:bold;text-decoration:none;color:black;}.subItem a{text-decoration:none;color:black;}.subItemOver{cursor:pointer;color:blue;text-decoration:underline;font-weight:bold;padding-left:5px;}.subItemOver a{color:blue;}.drop{border-left:1px solid black;border-right:1px solid black;}</style><script language="javascript">var TIMER_SLIDE = null;var OBJ_SLIDE;var OBJ_VIEW;var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDEvar NEW_PIX_VAL;var DELAY_SLIDE = 30; //this is the time between each call to slide var DIV_HEIGHT = 22; //value irrelevantvar SUB_MENU_NUM =0;var RE_INIT_OBJ = null;var bMenu = document.getElementById("curMenu");var MainDiv,SubDiv//DD added codedocument.write('<div id="tempcontainer" class="mainDiv"style="visibility: hidden; position: absolute"></div>')function Init(objDiv){if (TIMER_SLIDE == null){SUB_MENU_NUM = 0;MainDiv = objDiv.parentNode;SubDiv = MainDiv.getElementsByTagName("DIV").item(0);SubDiv.onclick = SetSlide;OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)OBJ_VIEW =OBJ_SLIDE.getElementsByTagName("DIV").item(0);document.getElementById("tempcontainer").innerHTML=MainDiv.get ElementsByTagName("DIV").item(2).innerHTML //DD added codeDIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added codefor (i=0;i<OBJ_VIEW.childNodes.length;i++){if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN"){SUB_MENU_NUM ++;OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;OBJ_VIEW.childNodes.item(i).onmouseout = ChangeStyle;}}NEW_PIX_VAL =parseInt(MainDiv.getAttribute("state"));}}function SetSlide(){if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code if (TIMER_SLIDE == null && this.parentNode == MainDiv)TIMER_SLIDE = setInterval('RunSlide()',DELAY_SLIDE);else{RE_INIT_OBJ = this;setTimeout('ReInit()', 200);}}function ReInit(obj){Init(RE_INIT_OBJ);TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);RE_INIT_OBJ = null;}function RunSlide(){if (OBJ_VIEW.getAttribute("state") == 0){NEW_PIX_VAL += PIX_SLIDE;OBJ_SLIDE.style.height = NEW_PIX_VAL;if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code{clearInterval(TIMER_SLIDE);TIMER_SLIDE = null;OBJ_VIEW.style.display = 'inline';OBJ_VIEW.setAttribute("state","1")MainDiv.setAttribute("state",NEW_PIX_VAL);}} else{OBJ_VIEW.style.display = 'none';NEW_PIX_VAL -= PIX_SLIDE;if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;if (NEW_PIX_VAL <= 0){NEW_PIX_VAL = 0;OBJ_SLIDE.style.height = NEW_PIX_VALclearInterval(TIMER_SLIDE);TIMER_SLIDE = null;OBJ_VIEW.setAttribute("state","0")MainDiv.setAttribute("state",NEW_PIX_VAL);}}}function ChangeStyle(){if (this.className == this.getAttribute("classOut"))this.className = this.getAttribute("classOver");elsethis.className = this.getAttribute("classOut");}</script><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" >网页特效</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">图形图像</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">鼠标事件</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">时刻日期</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">导航菜单</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">文字成效</a></span></div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网页教学</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网页制作</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网络编程</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">图形图像</a></span></div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网络开发</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网页设计</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">艺术创作</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">电脑网络</a></span></div></div></div>。

JS实现折叠式导航菜单

用JS做的简单的可折叠的两级树形菜单

⽤JS做的简单的可折叠的两级树形菜单复制代码代码如下:<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><hrad><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>可折叠的两级菜单</title><styletype="text/css"></style><scriptlanguage="javascript">window.onload=function(){varlistUL=document.getElementById("listUL");varolist=listUL.childNodes;varoa=0;for(var i = 0; i < olist.length; i++) {if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){ oa=olist[i];oa.onclick=change;}}functionchange(){varos=this.getElementsByTagName("ul")[0];if(os.className=="myHide")os.className="myShow";elseos.className="myHide";}}</script></hrad><body><divid="navigation"><ulid="listUL"><li><divclass="txt">Home</div></li><li><divclass="txt">news</div><ulclass="myHide"><li><ahref="#">lastest news</a></li><li><ahref="#">all news</a></li></ul></li><li><divclass="txt">sports</div><ulclass="myHide"><li><ahref="#">lastest news</a></li><li><ahref="#">all news</a></li></ul></li><li><divclass="txt">weather</div><ulclass="myHide"><li><ahref="#">lastest news</a></li> <li><ahref="#">all news</a></li></ul></li></ul></div></body></html>。

JS折叠菜单实例方法简单实用(火狐IE兼容)

JS折叠菜单实例方法简单实用(火狐IE兼容)JS折叠菜单点击可折叠展开（兼容IE+ FF）<style type="text/css">.mainDiv{width:160px;}.topItem{width:160px;height:22px;cursor:pointer;background: #467BF2;text-decoration: none;color: white;font-weight:bold;font-family:"GOTHIC";}.dropMenu{background:#D9D9D9;border-top:1px solid #467BF2;border-left:1px solid #92B1F8;border-right:1px solid #92B1F8;border-bottom:1px solid #92B1F8;}.subMenu{display:none;}.subItem{padding-left:5px;cursor:pointer;font-weight:bold;text-decoration:none;color:black;}.subItem a{text-decoration:none;color:black;}.subItemOver{cursor:pointer;color:blue;text-decoration:underline;font-weight:bold;padding-left:5px;}.subItemOver a{color:blue;}.drop{border-left:1px solid black;border-right:1px solid black;}</style><script language="javascript">var TIMER_SLIDE = null;var OBJ_SLIDE;var OBJ_VIEW;var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDEvar NEW_PIX_VAL;var DELAY_SLIDE = 30; //this is the time between each call to slide var DIV_HEIGHT = 22; //value irrelevantvar SUB_MENU_NUM =0;var RE_INIT_OBJ = null;var bMenu = document.getElementById("curMenu");var MainDiv,SubDiv//DD added codedocument.write('<div id="tempcontainer" class="mainDiv"style="visibility: hidden; position: absolute"></div>')function Init(objDiv){if (TIMER_SLIDE == null){SUB_MENU_NUM = 0;MainDiv = objDiv.parentNode;SubDiv = MainDiv.getElementsByTagName("DIV").item(0);SubDiv.onclick = SetSlide;OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)OBJ_VIEW =OBJ_SLIDE.getElementsByTagName("DIV").item(0);document.getElementById("tempcontainer").innerHTML=MainDiv.ge tElementsByTagName("DIV").item(2).innerHTML //DD added code DIV_HEIGHT=document.getElementById("tempcontainer").offsetHei ght //DD added codefor (i=0;i<OBJ_VIEW.childNodes.length;i++){if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN"){SUB_MENU_NUM ++;OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;}}NEW_PIX_VAL =parseInt(MainDiv.getAttribute("state"));}}function SetSlide(){if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code if (TIMER_SLIDE == null && this.parentNode == MainDiv)TIMER_SLIDE = setInterval('RunSlide()',DELAY_SLIDE);else{RE_INIT_OBJ = this;setTimeout('ReInit()', 200);}}function ReInit(obj){Init(RE_INIT_OBJ);TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);RE_INIT_OBJ = null;}function RunSlide(){if (OBJ_VIEW.getAttribute("state") == 0){NEW_PIX_VAL += PIX_SLIDE;OBJ_SLIDE.style.height = NEW_PIX_VAL;if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code{clearInterval(TIMER_SLIDE);TIMER_SLIDE = null;OBJ_VIEW.style.display = 'inline';OBJ_VIEW.setAttribute("state","1")MainDiv.setAttribute("state",NEW_PIX_VAL);}} else{OBJ_VIEW.style.display = 'none';NEW_PIX_VAL -= PIX_SLIDE;if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;if (NEW_PIX_VAL <= 0){NEW_PIX_VAL = 0;OBJ_SLIDE.style.height = NEW_PIX_VALclearInterval(TIMER_SLIDE);TIMER_SLIDE = null;OBJ_VIEW.setAttribute("state","0")MainDiv.setAttribute("state",NEW_PIX_VAL);}}}function ChangeStyle(){if (this.className == this.getAttribute("classOut"))this.className = this.getAttribute("classOver");elsethis.className = this.getAttribute("classOut");}</script><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" >网页特效</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">图形图像</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">鼠标事件</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">时间日期</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">导航菜单</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">文字效果</a></span></div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网页教学</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网页制作</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网络编程</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">图形图像</a></span></div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网络开发</div><div class="dropMenu" ><div class="subMenu" state="0"><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">网页设计</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">艺术创作</a></span><BR /><span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">电脑网络</a></span></div></div></div>。

24.3 使用JavaScript 创建折叠菜单[共3页]

347 </div></div></body></html> 上述代码通过CSS 对对联广告进行固定定位排版，使其能适应窗口和分辨率的变化且不会随滚动条的变化而发生位置的改变。

上述脚本代码中的closeWindow()包含了一个参数，调用时传递的参数是对应广告DIV 的id 值，因而点击链接时可以通过该参数获取对应的广告，从而可以对其设置显示样式为none ，使广告隐藏，以此来达到关闭的效果。

24.3 使用JavaScript 创建折叠菜单折叠菜单指单击某个标题时，可以将其对应的下级菜单隐藏或显示的菜单。

当菜单项比较多时，如果全部在同一页面显示所有的菜单项，将会显得比较杂乱，且占用较多空间。

此时如果使用折叠菜单则节约了空间，使页面排版更加紧凑。

折叠菜单常常用在后台管理导航菜单。

折叠菜单可以有两种效果：一种是一次只显示一个标题下的菜单，单击其他标题时，将隐藏已打开的菜单；还有一种就是可以打开所有菜单，单击其他标题不会隐藏已打开的菜单，要隐藏打开的菜单需要再次单击对应的标题。

图24-5所示就是第二种类型的折叠菜单。

下面我们将介绍使用JavaScript 创建折叠菜单。

1．实例描述本实例实现上述介绍的第一类折叠菜单，即一次只显示一个标题的下级菜单。

其最初效果只显示各个标题，当单击某个标题时，将显示该标题的下级菜单；此后单击其他标题时，隐藏已显示的菜单，并显示最后单击的标题的下级菜单；如果再次单击已显示菜单的标题，将隐藏显示的菜单，回到最初效果。

效果如图24-6~图24-8所示。

图24-6 运行最初效果图24-7 单击第一个标题效果图24-8 单击第三个标题效果2．技术要点运行的最初效果通过CSS 设置各个菜单对应的列表ul 的显示样式为“none ”来实现。

使用JavaScript 实现的功能是：单击一个标题时，首先判断其下级菜单是否显示，如果显示则隐藏其菜单列表；如果不显示，则首先隐藏所有菜单列表，然后显示该标题的下级菜单。

CSS+JS打造的可折叠展开的菜单

JS三级可折叠菜单实现方法

divcss收缩展开导航

divcss收缩展开导航

CSS实现单选折叠菜单功能

CSS+JS打造的可折叠展开的菜单

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

可折叠展开导航栏写法

HTML+CSS结构鼠标点击折叠展开折叠式菜单

js实现简单折叠、展开菜单的方法

JS实现无限级网页折叠菜单（类似树形菜单）效果代码

纯CSS打造可折叠树状菜单

折叠菜单实验报告总结(3篇)

折叠式菜单的实现原理

原生js+css实现二级伸缩菜单

JS折叠菜单实例方法简单实用

JS实现折叠式导航菜单

用JS做的简单的可折叠的两级树形菜单

JS折叠菜单实例 方法简单实用(火狐IE兼容)

24.3 使用JavaScript 创建折叠菜单[共3页]

JS折叠菜单实例方法简单实用(火狐IE兼容)