L'exemple de cet article décrit le menu secondaire pliable implémenté par JavaScript+CSS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Fichier .aspx :
<%@ 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>
fichier js :
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";
}
}
Ce qui doit être noté ici est le problème du chargement retardé. Étant donné que la méthode d'opération de prétraitement statUp() doit être effectuée lorsque la page est chargée, lorsque js est écrit dans un fichier séparé ou que js est écrit dans le fichier < head>, window.onload doit être utilisé. =function(){Execute Statement;} Chargement paresseux, sinon lors du référencement d'objets dans le DOM, un message d'erreur d'objet manquant apparaîtra.
Une autre solution consiste à écrire tout le javaScript directement dans