读书人

Jquery怎么实现菜单点击消失

发布时间: 2012-06-22 16:16:32 作者: rapoo

Jquery如何实现菜单点击消失?
点击按钮后菜单显示,然后点击除菜单外任何一个地方,菜单就消失,如何判断实现呢?

[解决办法]

HTML code
<!doctype html><html>    <head>        <meta charset="gb2312" />        <title></title>        <style>            span {                color:red;            }            #test {                display:none;                position:absolute;                left:30px; top:30px;                width:200px;                border:1px solid red;                background:#fff;            }        </style>    </head>    <body>        <span id="span">打开层</span>        <div>1-1111111111</div>        <div>1-1111111111</div>        <div>1-1111111111</div>        <div>1-1111111111</div>        <div>1-1111111111</div>        <div id="test">            <a href="#">123</a>            浮层,点击这个浮层以外的区域,都可以隐藏这个浮层        <div>        <script>            function $(o){return document.getElementById(o)}            $('span').onclick = function(e){                $('test').style.display = 'block';                e = e || window.event;                if (e.stopPropagation) {                    e.stopPropagation();                } else {                    e.cancelBubble = true;                }            }            var odiv = $('test');            document.onclick = function(e){                e = e || window.event;                var s = e.target || e.srcElement;                if( e.srcElement ){ //ie                    if( !(s == odiv || odiv.contains(s)) ){                        odiv.style.display = 'none';                    }                }else{                    var res = odiv.compareDocumentPosition(s);                     if( !(s == odiv || res == 20 || res == 0) ){                        odiv.style.display = 'none';                    }                }                            }                                            </script>            </body></html> 

读书人网 >JavaScript

热点推荐