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

课程

/前端开发

/JavaScript

/DOM事件探秘

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


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

源自：DOM事件探秘  4-3

关注问题 我要回答
1333
操作
收起

正在回答

2 回答

qq_一一不服来战 回答被采纳 +3 积分
2016-01-03

你再试试我改的这个，增加了个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 回复 有任何疑惑可以回复我~
收起回答
#1

慕码人0911192 提问者

我又改善了下，代码在下面！ 一起加油。。。
2016-01-03 回复 有任何疑惑可以回复我~
#2

qq_一一不服来战 回复 慕码人0911192 提问者

一起加油^_^
2016-01-04 回复 有任何疑惑可以回复我~
慕码人0911192 提问者
2016-01-03

<!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 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
DOM事件探秘
  • 参与学习       99544    人
  • 解答问题       1197    个

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

进入课程

本课相似问答

1 回答看完这一节，自己写了一个DOM二级事件函数，但老是报错 ：obj is null ！

2 回答这个就是按照老师写的一模一样写了一遍，怎么点开始没反应呢？

3 回答为啥第二个按钮没有作用了，看了半天没看出问题

1 回答虽然写出来了但是有个bug看在坐有没有大神能帮忙解决一下

2 回答为什么都一点效果都没有啊，我看了同学出错的地方改，就加了一个花括号
搜索更多本课相关问答

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

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