看了一半，就没看下去了，感觉老师的方法有点儿拖沓，自己写了个，但是最后一个函数没反应？？？

源自：4-3 [DOM事件] QQ面板状态切换效果

看了一半，就没看下去了，感觉老师的方法有点儿拖沓，自己写了个，但是最后一个函数没反应？？？

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
        div{
            width: 300px;
            height: 200px;
            background: #ccc;
            position: relative;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: block;
            width: 80px;
            height: 24px;
            position: absolute;
            right: 80px;
            bottom: 30px;
            overflow: hidden;
        }
        li{
            line-height: 24px;
            text-indent:8px;
            background: #c00;
            color: #fff;
        }

   </style>
   <script>
       window.onload =function(){
           var ul =document.getElementsByTagName('ul')[0];
           var li = ul.getElementsByTagName("li");
           // 点击显示菜单
           ul.onclick = function(ev){
                   var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                   oEvent.cancelBubble = true;    // 取消冒泡事件。
                   ul.style.overflow = "visible";
               }

           for(var i=0;i<li.length;i++){
           // 点击空白处隐藏菜单
               document.onclick = function(){
                    ul.style.overflow = "hidden";
               }
           // 鼠标移入改变背景色
               li[i].onmouseover = function(){
                   this.style.background = "#00c";
               }
           // 鼠标移出还原背景色
               li[i].onmouseout = function(){
                   this.style.background = "#c00";
               }
           // 当菜单全部显示时
                if (ul.style.overflow == "visible") {
                       li[i].onclick = function(ev){
                           for (var j = 0; j < li.length; j++) {
                               li[j].style.display = "none";
                           }
                       var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                       oEvent.cancelBubble = true;    // 取消冒泡事件。
                       this.style.display = "block";
                       ul.style.overflow = "hidden";
                        }

                }
           }
       }
   </script>
</head>
<body>
   <div>
       <ul>
           <li>在线</li>
           <li>Q我吧</li>
           <li>请勿打扰</li>
           <li>忙碌</li>
           <li>离开</li>
       </ul>
   </div>
</body>
</html>

样式是随便写的哈，，，，，

我就想问下当菜单全部显示时，执行的函数为什么没有效果，网页也没有报错啊，求教求教！！！

提问者：慕码人0911192 2015-12-25 17:52

个回答

qq_一一不服来战

2016-01-03 14:07:04

已采纳

你再试试我改的这个，增加了个for循环，如果有不懂的可以继续问我，加油！！！
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
           div{
               width: 300px;
               height: 200px;
               background: #ccc;
               position: relative;
           }
           ul{
               list-style: none;
               margin: 0;
               padding: 0;
               display: block;
               width: 80px;
               height: 24px;
               position: absolute;
               right: 80px;
               bottom: 30px;
               overflow: hidden;
           }
           li{
               line-height: 24px;
               text-indent:8px;
               background: #c00;
               color: #fff;
           }

    </style>
    <script>
        window.onload =function(){
            var ul =document.getElementsByTagName('ul')[0];
            var li = ul.getElementsByTagName("li");
            // 点击显示菜单
            var k=0
            li[0].onclick = function(ev){
                  var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                  oEvent.cancelBubble = true;    // 取消冒泡事件。
                  if(k==0){
                    ul.style.overflow = "visible";
                    k=1;
                  }
                  else{ul.style.overflow="hidden";k=0;}
                }

            for(var i=0;i<li.length;i++){
            // 点击空白处隐藏菜单

            // 鼠标移入改变背景色
                li[i].onmouseover = function(){
                    this.style.background = "#00c";
                }
            // 鼠标移出还原背景色
                li[i].onmouseout = function(){
                    this.style.background = "#c00";
                }

            // 当菜单全部显示时
                if (ul.style.overflow == "visible") {
                        li[i].onclick = function(ev){
                            for (var j = 0; j < li.length; j++) {
                                li[j].style.display = "none";
                            }
                        var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                        oEvent.cancelBubble = true;    // 取消冒泡事件。
                        this.style.display = "block";
                        ul.style.overflow = "hidden";
                        }

                }
            }
            for(var i=1;i<li.length;i++){
              li[i].onclick=function(){
                ul.style.overflow="hidden";
                k=0;
                li[0].innerHTML=this.innerHTML;
              }
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li>在线</li>
            <li>在线</li>
            <li>Q我吧</li>
            <li>请勿打扰</li>
            <li>忙碌</li>
            <li>离开</li>
        </ul>
    </div>
</body>
</html>

0
慕码人0911192

2016-01-03 21:29:15

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
           div{
               width: 300px;
               height: 200px;
               background: #ccc;
               position: relative;
           }
           ul{
               list-style: none;
               margin: 0;
               padding: 0;
               display: block;
               width: 80px;
               height: 24px;
               position: absolute;
               right: 80px;
               bottom: 30px;
               overflow: hidden;
               cursor: pointer;
           }
           li{
               line-height: 24px;
               text-indent:8px;
               background: #c00;
               color: #fff;
           }

    </style>
    <script>
        window.onload =function(){
            var ul =document.getElementsByTagName('ul')[0];
            var li = ul.getElementsByTagName("li");
            // 点击显示菜单
            var k=0
            li[0].onclick = function(ev){
                  var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                  oEvent.cancelBubble = true;    // 取消冒泡事件。
                  if(k==0){
                    ul.style.overflow = "visible";
                    k=1;
                  }
                  else{ul.style.overflow="hidden";k=0;}
                }

            for(var i=0;i<li.length;i++){
            // 点击空白处隐藏菜单

            // 鼠标移入改变背景色
                li[i].onmouseover = function(){
                    this.style.background = "#00c";
                }
            // 鼠标移出还原背景色
                li[i].onmouseout = function(){
                    this.style.background = "#c00";
                }

            // 当菜单全部显示时
                if (ul.style.overflow == "visible") {
                        li[i].onclick = function(ev){
                            for (var j = 0; j < li.length; j++) {
                                li[j].style.display = "none";
                            }
                        var oEvent = ev||event;        //兼容火狐和 IE、谷歌！
                        oEvent.cancelBubble = true;    // 取消冒泡事件。
                        this.style.display = "block";
                        ul.style.overflow = "hidden";
                        }

                }
            }
            // 改善了下，点击dom，菜单收回
            for(var i=1;i<li.length;i++){
              document.onclick = function(){
                 ul.style.overflow="hidden";
              }

              li[i].onclick=function(){

                k=0;
                li[0].innerHTML=this.innerHTML;
              }
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li>在线</li>
            <li>在线</li>
            <li>Q我吧</li>
            <li>请勿打扰</li>
            <li>忙碌</li>
            <li>离开</li>
        </ul>
    </div>
</body>
</html>

0