search

Home >Web Front-end >JS Tutorial >Example of foldable secondary menu implemented with JavaScript+CSS_javascript skills

Example of foldable secondary menu implemented with JavaScript+CSS_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:13:151698browse

The example in this article describes the foldable secondary menu implemented by JavaScript+CSS. Share it with everyone for your reference, the details are as follows:

.aspx file: 

<%@ 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>无标题页</title>
<script type="text/javascript" src="JScript.js" ></script>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
 border:0px;
}
#nav{
 width: 200px;
 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;
 float: left;
}
#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</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)">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);">菜单2_1</a></li>
 <li><a href="javascript:void(0);">菜单2_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
 <ul>
 <li><a href="javascript:void(0);">菜单3_1</a></li>
 <li><a href="javascript:void(0);">菜单3_2</a></li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js file: 

function doMenu(obj){
 var items=obj.parentNode.getElementsByTagName("ul");
 var itmUl;
 if(items.length>0){
 itmUl=items[0];
 }
 if(itmUl.className!="ex"){
 cxAll();
 itmUl.className="ex";
 }else{
 itmUl.className="cx";
 }
}
function statUp(){
 cxAll();
}
function cxAll(){
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
 for (var i=0;i<items.length;i++)
 {
 items[i].className="cx";
 }
}

What needs to be noted here is the problem of delayed loading. Since the preprocessing operation statUp() method needs to be performed when loading the page, when js is written into a separate file or js is written in the 93f0f5c25f18dab9d176bd4f6de5d30e node, window.onload needs to be used. =function(){Execute statement;} Lazy loading, otherwise when referencing objects in the DOM, a missing object error message will appear.

Another solution is to write all javaScript directly in 73a6ac4ed44ffec12cee46588e518a5e

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单</title>
<script type="text/javascript" src="Untitled-3.js"></script>
<style>
*{
 margin: 0px;
 padding: 0px;
 border:0px;
}
#nav{
 width: 200px;
 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;
 float: left;
}
#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>
</head>
<body>
<div id="Parent">
<ul id="nav">
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单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)">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);">菜单2_1</a></li>
 <li><a href="javascript:void(0);">菜单2_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
 <ul>
 <li><a href="javascript:void(0);">菜单3_1</a></li>
 <li><a href="javascript:void(0);">菜单3_2</a></li>
 </ul>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
function doMenu(obj){
 var items=obj.parentNode.getElementsByTagName("ul");
 var itmUl;
 if(items.length>0){
 itmUl=items[0];
 }
 if(itmUl.className!="ex"){
 cxAll();
 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";
 }
 }
statUp();
</script>

Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques" and "JavaScript Mathematics Summary of operation usage》

I hope this article will be helpful to everyone in JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of {} statement block in JavaScript_Basic knowledgeNext article：Detailed explanation of {} statement block in JavaScript_Basic knowledge

Related articles

See more