为了账号安全,请及时绑定邮箱和手机立即绑定

这个代码是不是逻辑错了?

<!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>

当我点击p的时候ul会显示但是再次点击p的时候ul就不隐藏了!是哪里出错了吗?

正在回答

3 回答

<!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(){

      // 将所有点击的标题和要显示隐藏的列表取出来

 var ps=document.getElementById('menu').getElementsByTagName('p');

 var uls=document.getElementById('menu').getElementsByTagName('ul');

 if(ps.length!=uls.length)return;

  // 遍历所有要点击的标题且给它们添加索引及绑定事件

 for(i=0;i<ps.length;i++){

 // 获取点击的标题上的索引属性,根据该索引找到对应的列表

     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>

看看是这样的效果吗?我也是在你的基础上改的,不知道有没有bug

0 回复 有任何疑惑可以回复我~

一、注意看判断语句if的条件 应该是双等于oUls[this.index].className=="active"
二、需在第二句oUls[this.index].className="active";前加一句 else

0 回复 有任何疑惑可以回复我~

看过了,但是没找出来原因。。。。我也很想知道哪里出的问题

0 回复 有任何疑惑可以回复我~
#1

街角疯 提问者

我也找不出来原因!
2017-05-20 回复 有任何疑惑可以回复我~
#2

街角疯 提问者

要加一个else 不然即使执行了if中语句后还是要执行后面的语句
2017-05-20 回复 有任何疑惑可以回复我~
#3

听歌 回复 街角疯 提问者

我加了else了啊。也没用啊
2017-05-21 回复 有任何疑惑可以回复我~
#4

听歌 回复 街角疯 提问者

我加了else了啊。也没用啊
2017-05-21 回复 有任何疑惑可以回复我~
#5

街角疯 提问者 回复 听歌

我加后有用
2017-05-21 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

这个代码是不是逻辑错了?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信