完美測試成功
<!doctype html>
<html>
<head>
?? ?<meta charset="GBK">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ? padding:0; ?
? ? ?font-size:13px;?
? ? ?list-style:none;
? ? }
.menu{width:210px; ?
? ? ?margin:50px auto;?
? ? ?border:1px solid #ccc;
? ? ?}
.menu p{
? ? ? ?height:25px; ? ? ??
? ? ? ?line-height:25px; ??
? ? ? ?font-weight:bold; ??
? ? ? ?background:#eee; ? ?
? ? ? ?border-bottom:1px solid #ccc; ?
? ? ? ?cursor:pointer; ??
? ? ? ?padding-left:5px;
? ? ? }
.menu div ul{
?? ? ? ? ? display:none;
? ? ? ? ? ?}
.menu li{
? ? ? ? height:24px; ? ?
? ? ? ? line-height:24px;?
? ? ? ? padding-left:5px;
? ? ? ? }
</style>
<script type="text/javascript">
function $(id){?
? ?return typeof id==="string" ? document.getElementById(id):id;
}
window.onload=function(){
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來?
? var menu=$("menu"); ??
? ?var ps=menu.getElementsByTagName("p");
? ?var uls=menu.getElementsByTagName("ul");
for(var i=0;i<ps.length;i++){
ps[i].id=i;
ps[i].onclick=function(){
var ulnow=uls[this.id].style.display;
for(var ?j=0;j<uls.length;j++)
{
uls[j].style.display="none";
if( ulnow=="none" || ulnow=="" )
{
uls[this.id].style.display="block";
}else{
uls[this.id].style.display="none";
}
}
}?
? ? // 遍歷所有要點擊的標題且給它們添加索引及綁定事件 ?
? ?// 獲取點擊的標題上的索引屬性，根據(jù)該索引找到對應的列表 ?
? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
?</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
2022-11-29
是要有這樣的好習慣
2021-10-29
不錯，這個代碼，正好我沒有