您的位置：首页 > Web前端 > JavaScript

js实现收缩导航树

2013-11-27 19:53 267 查看

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Navigation Tree Example</title>
<style type="text/css">
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 alows you to expand and collapse items.</p>
<ul>
<li><a id="products" href="#">[+] Produts</a>
<ul id="productsmenu">
<li><a href="productlist.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="support.html">Support Form</a></li>
<li><a href="contact.html">Contact Support</a></li>
</ul>
</li>
<li><a id="contact" href="#">[+] Contact Us</a>
<ul id="contactmenu">
<li><a href="service.html">Service Department</a></li>
<li><a href="sales.html">Sales Department</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="Test.js"></script>
</body>
</html>

Test.js代码如下

function Toggle(e){
if(!e){
var e=window.event;
}
whichlink=(e.target)?e.target.id:e.secElement.id;
obj=document.getElementById(whichlink+"menu");
visible=obj.style.display=="block";
key=document.getElementById(whichlink);
keyname=key.firstChild.nodeValue.substring(3);
if(visible){
obj.style.display="none";
key.firstChild.nodeValue='[+] '+keyname;
}else
{

obj.style.display="block";
key.firstChild.nodeValue='[-] '+keyname;
}
}

document.getElementById('products').onclick=Toggle;
document.getElementById('support').onclick=Toggle;
document.getElementById('contact').onclick=Toggle;

开始的时候一直报个错误，后来发现是Test.js引入那句话写在head里了，那是body还没加载，所以document.getElementById是得不到东西的。

把js引入那句话放到body的最后就好了。还有就是注意点击事件的substring的作用，是为了每次替换[+]和[-]。所以substring传参数是3。效果图如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航