這個代碼是不是邏輯錯了？
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></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;
?? ??? ??? }
?? ??? ?
?? ??? ?.hidden{
?? ??? ??? ?display:none;
?? ??? ??? ?}
?? ??? ? .active{
?? ??? ??? ?display: block;
?? ??? ?}
?? ??? ?.menu li{height:24px;
?? ??? ????????? line-height:24px;
?? ??? ????????? padding-left:5px;}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload=function(){
?? ??? ??? ?var oDiv=document.getElementById("menu");
?? ??? ??? ?var oPs=oDiv.getElementsByTagName("p");
?? ??? ??? ?var oUls=oDiv.getElementsByTagName("ul");
?? ??? ??? ?if(oPs.length=oUls.length){
?? ??? ??? ??? ?for(var i=0;i<oPs.length;i++){
?? ??? ??? ??? ??? ?oPs[i].index=i;
?? ??? ??? ??? ??? ?oPs[i].onclick=function(){
?? ??? ??? ??? ??? ??? ?if(oUls[this.index].className="active"){
?? ??? ??? ??? ??? ??? ??? ?oUls[this.index].className="hidden";
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?oUls[this.index].className="active";
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?????? ?
?? ?</script>
</head>
<body>
?? ?<div class="menu" id="menu">
?? ??? ?<div>
?? ??? ??? ?<p>Web前端</p>
?? ??? ??? ?<ul class="active">
?? ??? ??? ??? ?<li>JavaScript</li>
?? ??? ??? ??? ?<li>DIV+CSS</li>
?? ??? ??? ??? ?<li>jQuery</li>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ??? ?<div>
?? ??? ??? ?<p>后臺腳本</p>
?? ??? ??? ?<ul class="hidden">
?? ??? ??? ??? ?<li>PHP</li>
?? ??? ??? ??? ?<li>ASP.net</li>
?? ??? ??? ??? ?<li>JSP</li>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ??? ?<div>
?? ??? ??? ?<p>前端框架</p>
?? ??? ??? ?<ul class="hidden">
?? ??? ??? ??? ?<li>Extjs</li>
?? ??? ??? ??? ?<li>Esspress</li>
?? ??? ??? ??? ?<li>YUI</li>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ?</div>
</body>
</html>
當(dāng)我點擊p的時候ul會顯示但是再次點擊p的時候ul就不隱藏了！是哪里出錯了嗎？
2018-09-19
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<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 li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
?.hidden{
? ? ? ? ? ? display:none;
? ? ? ? ? ? }
? ? ? ? ?.active{
? ? ? ? ? ? display: block;
? ? ? ? }
</style>
<script type="text/javascript">
window.onload=function(){
? ? ? // 將所有點擊的標(biāo)題和要顯示隱藏的列表取出來
?var ps=document.getElementById('menu').getElementsByTagName('p');
?var uls=document.getElementById('menu').getElementsByTagName('ul');
?if(ps.length!=uls.length)return;
? // 遍歷所有要點擊的標(biāo)題且給它們添加索引及綁定事件
?for(i=0;i<ps.length;i++){
?// 獲取點擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對應(yīng)的列表
? ? ?ps[i].id=i;?
?ps[i].onclick=function(){
?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
?if(uls[this.id].className=="hidden")
?{
uls[this.id].className="active"?
?}
?else
?{
uls[this.id].className="hidden"?
?}
?}
?}
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul class="active">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul class="hidden">
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul class="hidden">
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
看看是這樣的效果嗎？我也是在你的基礎(chǔ)上改的，不知道有沒有bug
2017-05-25
一、注意看判斷語句if的條件 應(yīng)該是雙等于oUls[this.index].className=="active"
二、需在第二句oUls[this.index].className="active";前加一句 else
2017-05-20
看過了，但是沒找出來原因。。。。我也很想知道哪里出的問題