suchen

Heim >Web-Frontend >js-Tutorial >Beispiel eines faltbaren sekundären Menüs, implementiert mit JavaScript+CSS_Javascript-Kenntnissen

Beispiel eines faltbaren sekundären Menüs, implementiert mit JavaScript+CSS_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:13:151683Durchsuche

Das Beispiel in diesem Artikel beschreibt das faltbare Sekundärmenü, das durch JavaScript+CSS implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

.aspx-Datei: 

<%@ 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-Datei: 

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";
 }
}

Was hier beachtet werden muss, ist das Problem des verzögerten Ladens, da die Vorverarbeitungsoperation statUp() beim Laden der Seite ausgeführt werden muss, wenn js als separate Datei geschrieben wird oder js in die ef0c2772b76bfffb9337fc47aea795ed-Knoten, window.onload muss =function(){Execute-Anweisung;} Lazy Loading verwendet werden, andernfalls wird beim Verweisen auf Objekte im DOM eine Fehlermeldung über fehlende Objekte angezeigt.

Eine andere Lösung besteht darin, das gesamte JavaScript direkt in 73a6ac4ed44ffec12cee46588e518a5e zu schreiben

<!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>

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Techniken des JavaScript-Suchalgorithmus“, „Zusammenfassung der Spezialeffekte und Techniken der JavaScript-Animation.“ ", "Zusammenfassung von JavaScript-Fehlern und Debugging-Techniken", "Zusammenfassung von JavaScript-Datenstrukturen und Algorithmustechniken", "Zusammenfassung von JavaScript-Traversal-Algorithmen und -Techniken“ und „JavaScript-Mathematik-Zusammenfassung der Operationsverwendung》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des {}-Anweisungsblocks in JavaScript_GrundkenntnisseNächster Artikel：Detaillierte Erläuterung des {}-Anweisungsblocks in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen