javascript实现分级目录
发布网友
发布时间：2022-04-21 21:08
共2个回答
热心网友
时间：2022-05-17 07:37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Select</title>
<script type="text/javascript" src="js/prototype-1.6.0.3.js">
</script>
<script type="text/javascript">
function action(m){
content = $(m.id + '_content');
if (content.style.display == 'none') {
content.style.display = '';
}
else {
content.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="d1" style="top:20px; left:100px; width:200px; height:500px">
<div id="d_head" style="height:20px">
Menu
</div>
<div id="d_body" align="left" style="height:400px">
<ul class="menu">
<li>
<span id="m1" onclick="action(this);">Core Java</span>
</li>
<ul id="m1_content" style="display:none">
<li>
<a href="#">Language</a>
</li>
<li>
<a href="#">IO</a>
</li>
<li>
<a href="#">Thread</a>
</li>
</ul>
<li>
<span id="m2" onclick="action(this);">Web Client</span>
</li>
<ul id="m2_content" style="display:none">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
</ul>
<li>
<span id="m3" onclick="action(this);">Web Server</span>
</li>
<ul id="m3_content" style="display:none">
<li>
<a href="#">JDBC</a>
</li>
<li>
<a href="#">Servlet/JSP</a>
</li>
<li>
<span id="m31" onclick="action(this);">Framewroks</span>
</li>
<ul id="m31_content" style="display:none">
<li>
<a href="#">Struts</a>
</li>
<li>
<a href="#">Hibernate</a>
</li>
<li>
<a href="#">Spring</a>
</li>
</ul>
<li>
<a href="#">Web Service</a>
</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
热心网友
时间：2022-05-17 08:55
不就是树形菜单吗！你用层来实现，onmouseover,onmouseout事件很简单啊！
