javascript实现树形目录的收缩与展开

最新推荐文章于 2024-06-24 11:17:20 发布

hhrxp373317

最新推荐文章于 2024-06-24 11:17:20 发布

阅读量5.6k

点赞数

分类专栏： JavaScript 文章标签： javascript 树形目录展开收缩

本文链接：https://blog.csdn.net/hhrxp/article/details/11706709

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a,li{ list-style-type:none; text-decoration:none;}
p,ul,li{ margin:0px;}
p{ margin-left:20px;}
.child{ display:none;}
</style>
<script type="text/javascript">
	function show(id){
		var ul = document.getElementById(id);
		if(ul.style.display == "block"){
			ul.style.display = "none";
		}else{
			ul.style.display = "block"; 
		}
	}
</script>
</head>

<body>
	<b>Tree menu</b>
	<p><a href="javascript:show('se')">JavaSE</a></p>
		<ul id="se" class="child">
			<li>JavaOOP</li>
			<li>JavaI/O</li>
			<li>JavaSocket</li>
		</ul>
	<p><a  href="javascript:show('ee')">JavaWeb</a></p>
		<ul id="ee" class="child">
			<li>Html</li>
			<li>Css</li>
			<li>Javascript</li>
			<li>oracle</li>
		</ul>
</body>
</html>