点击空白区域遮罩层消失

实现原理: 判断点击的区域是否为需要隐藏内容区域 若不是则隐藏收起

<div class="select-wrap">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list" style="display:none;">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

** - - - - - - - - - - - - -  JQurey方法 - - - - - - - - - - - - - - - - - -  **
//引入JQurey文件
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var btn = $(".select-span");
    btn.on("click",function(){
        //这里可以添加判断 style.display == "block" ? "none" : "block";
        $(".select-list").stop().slideDown();
    })
    //点击空白区域收起下拉ul  另外 移动端可能会实效 原因是不支持document 解决方案自行百度吧
    $(document).on('click', function(e){
        var contentEle= $('.select-wrap');
        if(contentEle!== e.target && contentEle.has(e.target).length === 0) {
            $('.select-wrap ul.select-list').css({'display':'none'});
        }
    });
</script>


** - - - - - - - - - - - - -  Javascript方法 - - - - - - - - - - - - - - - - - -  **
## 实现原理： 通过Btn触发JS事件, 设置背景COVER显示/隐藏

<button id="btn">点我有特效</button>
<div id="cover"></div>

<script>
    window.onload = function(){
        var Mybtn = document.getElementById('btn');
        var Mycover = document.getElementById('cover');
        Mybtn.onclick = function(){
            Mycover.style.display = "block";
            function moreddhide(e) {
                //如果e未定义，说明当前是IE浏览器 ,设置 e=window.event,其它浏览器中e就是event，所以不做处理
                if (!e) var e = window.event;      
                if (e.srcElement) {
                    //ie support e.srcElement , e.sreElement指向触发事件的元素
                    var a = e.srcElement.getAttribute("id")    
                } else {
                    var a = e.target.getAttribute("id")    //ff support e.target
                    alert(a);
                }
                if (a != 'btn') {
                    Mycover.style.display = "none";
                }
            }
            document.onclick = moreddhide;
        }
    }
</script>