仿QQ多级折叠、睁开菜单，三级下拉导航代码

发布时间：2018-08-23 08:48:02 所属栏目：创业来源：站长网

导读：仿QQ面板气魄威风凛凛的多级折叠、睁开菜单，三级下拉导航代码， Java Script+CSS配合结晶的功效，保举给各人，点击运行可查察结果。保举各人进修一下，着实行使面不是出格普及，我们可以用在靠山菜单导航。演示代码： htmlheadmeta http-equiv=Content-Type con

　　仿QQ面板气魄威风凛凛的多级折叠、睁开菜单，三级下拉导航代码，JavaScript+CSS配合结晶的功效，保举给各人，点击“运行”可查察结果。

　　保举各人进修一下，着实行使面不是出格普及，我们可以用在靠山菜单导航。

　　演示代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉菜单</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(/uploads/allimg/1104/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(/uploads/allimg/1104/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">  </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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如