Js three-level folding menu code effect

Source: Internet
Author: User
Tip: you can modify some code before running

<p><meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">*, Body, ul, li, h1, h2 {margin: 0; padding: 0; list-style: none;} body {font: 12px ""; padding-top: 20px ;}# menu {width: 200px; margin: auto ;}# menu h1 {cursor: pointer; color: # FFF; font-size: 12px; padding: 5px 0 3px 10px; border: # 601px solid; margin-top: 1px; background-color: # F93 ;}# menu h2 {cursor: pointer; color: #777; font-size: 12px; padding: 5px 0 3px 10px; border: # E7E7E7 1px solid; border-top-color: # FFF; background-color: # F4F4F4 ;} # menu ul {padding-left: 15px; height: 100px; border: # E7E7E7 1px solid; border-top: none; overflow: auto;} # menu ul li {padding: 5px 0 3px 10px ;}. no {display: none ;}</style></p><script language="JavaScript"><!--//function ShowMenu(obj,noid){var block =document.getElementById(noid);var n = noid.substr(noid.length-1);if(noid.length==4){var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");for(var i=0; i<p.length;i++){h2[i].innerHTML = h2[i].innerHTML.replace("+","-");h2[i].style.color = "";}obj.style.color = "#FF0000";for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}}else{var span = document.getElementById("menu").getElementsByTagName("span");var h1 = document.getElementById("menu").getElementsByTagName("h1");for(var i=0; i<p.length;i++){h1[i].innerHTML = h1[i].innerHTML.replace("+","-");h1[i].style.color = "";}obj.style.color = "#0000FF";for(var i=0; i</script><div id="menu"><p onClick="javascript:ShowMenu(this,'NO0')">- 一级菜单A</p><p onClick="javascript:ShowMenu(this,'NO00')">- 一级菜单A_1</p><ul class="no" id="NO00"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li></ul><p onClick="javascript:ShowMenu(this,'NO01')">- 一级菜单A_2</p><ul class="no" id="NO01"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li></ul><p onClick="javascript:ShowMenu(this,'NO02')">- 一级菜单A_3</p><ul class="no" id="NO02"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li></ul><p onClick="javascript:ShowMenu(this,'NO03')">- 一级菜单A_4</p><ul class="no" id="NO03"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li></ul><p onClick="javascript:ShowMenu(this,'NO1')">- 二级菜单B</p><p onClick="javascript:ShowMenu(this,'NO10')">- 二级菜单B_1</p><ul class="no" id="NO10"> <li>二级菜单B_0</li> <li>二级菜单B_1</li> <li>二级菜单B_2</li> <li>二级菜单B_3</li> <li>二级菜单B_4</li> <li>二级菜单B_5</li> <li>二级菜单B_6</li> <li>二级菜单B_7</li> <li>二级菜单B_8</li> <li>二级菜单B_9</li></ul><p onClick="javascript:ShowMenu(this,'NO11')">- 二级菜单B_2</p><ul class="no" id="NO11"> <li>二级菜单B_0</li> <li>二级菜单B_1</li> <li>二级菜单B_2</li> <li>二级菜单B_3</li> <li>二级菜单B_4</li> <li>二级菜单B_5</li> <li>二级菜单B_6</li> <li>二级菜单B_7</li> <li>二级菜单B_8</li> <li>二级菜单B_9</li></ul><p onClick="javascript:ShowMenu(this,'NO2')">- 三级菜单C</p><p onClick="javascript:ShowMenu(this,'NO20')">- 三级菜单C_1</p><ul class="no" id="NO20"> <li>三级菜单C_0</li> <li>三级菜单C_1</li> <li>三级菜单C_2</li> <li>三级菜单C_3</li> <li>三级菜单C_4</li> <li>三级菜单C_5</li> <li>三级菜单C_6</li> <li>三级菜单C_7</li> <li>三级菜单C_8</li> <li>三级菜单C_9</li></ul><p onClick="javascript:ShowMenu(this,'NO21')">- 三级菜单C_2</p><ul class="no" id="NO21"> <li>三级菜单C_0</li> <li>三级菜单C_1</li> <li>三级菜单C_2</li> <li>三级菜单C_3</li> <li>三级菜单C_4</li> <li>三级菜单C_5</li> <li>三级菜单C_6</li> <li>三级菜单C_7</li> <li>三级菜单C_8</li> <li>三级菜单C_9</li></ul><p onClick="javascript:ShowMenu(this,'NO3')">- 四级菜单D</p><p onClick="javascript:ShowMenu(this,'NO30')">- 四级菜单D_1</p><ul class="no" id="NO30"> <li>四级菜单D_0</li> <li>四级菜单D_1</li> <li>四级菜单D_2</li> <li>四级菜单D_3</li> <li>四级菜单D_4</li> <li>四级菜单D_5</li> <li>四级菜单D_6</li> <li>四级菜单D_7</li> <li>四级菜单D_8</li> <li>四级菜单D_9</li></ul><p onClick="javascript:ShowMenu(this,'NO31')">- 四级菜单D_2</p><ul class="no" id="NO31"> <li>四级菜单D_0</li> <li>四级菜单D_1</li> <li>四级菜单D_2</li> <li>四级菜单D_3</li> <li>四级菜单D_4</li> <li>四级菜单D_5</li> <li>四级菜单D_6</li> <li>四级菜单D_7</li> <li>四级菜单D_8</li> <li>四级菜单D_9</li></ul></div>
提示:您可以先修改部分代码再运行

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.