Of Stack

JS three level collapsible menu implementation method

  • 2021-01-11 01:54:02
  • OfStack

This article illustrates the JS3 level collapsible menu implementation method. To share with you for your reference, as follows:

ASPX code: 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title> No title page </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')"> The menu 1</a>
 <ul>
 <li><a href="javascript:void(0);"> The menu 1_1</a></li>
 <li><a href="javascript:void(0);"> The menu 1_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this,'1')"> The menu 2</a>
 <ul>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')" > The menu 2_1</a>
 <ul>
 <li> The menu 2_1_1</li>
 <li> The menu 2_1_2</li>
 </ul>
 </li>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')"> The menu 2_2</a>
  <ul>
 <li> The menu 2_2_1</li>
 </ul>
 </li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js file code: 


function doMenu(obj,strDeep){
 var items=obj.parentNode.getElementsByTagName("ul");
 // To obtain a  Object Your Node li  The included   all ul A collection of 
 var itmUl;
 var deeps=strDeep; //strDeep  Is the series of the current menu 
 if(items.length>0){
 itmUl=items[0];
 alert(itmUl);
 }
 if(itmUl.className!="ex"){
 cxAll();// When the current node is closed , Execute first to close all ul Sub menu 
 if(deeps=='2'){ // If you want to begin 3 Menu when , Also it 2 The level parent menu expands 
 itmUl.parentNode.parentNode.className="ex";
 }
 itmUl.className="ex"; // Expand Subordinate Menu 
 }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";
 }
}

More about JavaScript related content interested readers can view the site features: "JavaScript search algorithm skills summary", "JavaScript animation effects and skills summary", "JavaScript error and debugging skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript eraser algorithm and skills summary" and "JavaScript mathematical operation usage summary"

Hope this article described to everyone JavaScript program design is helpful.

Related articles: