<html>
<head><title>Creating a Navigation Tree</title>
<style>
A {text-decoration: none;}
#productsmenu,#supportmenu,#contactmenu {
display: none;
margin-left: 2em;
}
</style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The navigation tree below allows you to expand and
collapse items.</p>
<ul>
<li><a id="products" href="#">[+] Products</a>
<ul ID="productsmenu">
<li><a href="prodlist.html">Product List</a></li>
<li><a href="order.html">Order Form</a></li>
<li><a href="pricelist.html">Price List</a></li>
</ul>
</li>
<li><a id="support" href="#">[+] Support</a>
<ul id="supportmenu">
<li><a href="sforum.html">Support Forum</a></li>
<li><a href="scontact.html">Contact Support</a></li>
</ul>
</li>
<li><a ID="contact" href="#">[+] Contact Us</a>
<ul id="contactmenu">
<li><a href="contact1.html">Service Department</a></li>
<li><a href="contact2.html">Sales Department</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript"
src="tree.js">
</script>
</body>
</html>
－－－－－－－－－－－－－－－这是一段关于js的学习代码 －－－－－－－－－－－－－－－－－－－－－－－－
function Toggle(e) {
if (!document.getElementById) return; if (!e) var e = window.event; whichlink = (e.target) ? e.target.id : e.srcElement.id;
obj=document.getElementById(whichlink+"menu"); visible=(obj.style.display=="block") key=document.getElementById(whichlink);
keyname = key.firstChild.nodeValue.substring(3);
if (visible) {
// hide the menu
obj.style.display="none";
key.firstChild.nodeValue = "[+]" + keyname;
} else {
// show the menu
obj.style.display="block";
key.firstChild.nodeValue = "[-]" + keyname;
}
}
document.getElementById("products").onclick=Toggle;
document.getElementById("support").onclick=Toggle;
document.getElementById("contact").onclick=Toggle;
上面红色的就是我不太懂的地方请大家帮我分析一下，一定要仔细哦
<head><title>Creating a Navigation Tree</title>
<style>
A {text-decoration: none;}
#productsmenu,#supportmenu,#contactmenu {
display: none;
margin-left: 2em;
}
</style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The navigation tree below allows you to expand and
collapse items.</p>
<ul>
<li><a id="products" href="#">[+] Products</a>
<ul ID="productsmenu">
<li><a href="prodlist.html">Product List</a></li>
<li><a href="order.html">Order Form</a></li>
<li><a href="pricelist.html">Price List</a></li>
</ul>
</li>
<li><a id="support" href="#">[+] Support</a>
<ul id="supportmenu">
<li><a href="sforum.html">Support Forum</a></li>
<li><a href="scontact.html">Contact Support</a></li>
</ul>
</li>
<li><a ID="contact" href="#">[+] Contact Us</a>
<ul id="contactmenu">
<li><a href="contact1.html">Service Department</a></li>
<li><a href="contact2.html">Sales Department</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript"
src="tree.js">
</script>
</body>
</html>
－－－－－－－－－－－－－－－这是一段关于js的学习代码 －－－－－－－－－－－－－－－－－－－－－－－－
function Toggle(e) {
if (!document.getElementById) return; if (!e) var e = window.event; whichlink = (e.target) ? e.target.id : e.srcElement.id;
obj=document.getElementById(whichlink+"menu"); visible=(obj.style.display=="block") key=document.getElementById(whichlink);
keyname = key.firstChild.nodeValue.substring(3);
if (visible) {
// hide the menu
obj.style.display="none";
key.firstChild.nodeValue = "[+]" + keyname;
} else {
// show the menu
obj.style.display="block";
key.firstChild.nodeValue = "[-]" + keyname;
}
}
document.getElementById("products").onclick=Toggle;
document.getElementById("support").onclick=Toggle;
document.getElementById("contact").onclick=Toggle;
上面红色的就是我不太懂的地方请大家帮我分析一下，一定要仔细哦
obj=document.getElementById(whichlink+"menu"); visible=(obj.style.display=="block") key=document.getElementById(whichlink); //获得ID为whichlink的对象
keyname = key.firstChild.nodeValue.substring(3); //获得这个对象的nodevalue