首页 > js如何实现点击下拉框以外的部分关闭下拉框?

js如何实现点击下拉框以外的部分关闭下拉框?

js如何实现点击下拉框以外的部分关闭下拉框?
可用jQuery!
最好是点击下拉框以外的元素第一次只隐藏下拉框,但被点击的元素(如a标签)也不会触发,下拉框隐藏再次点击才会触发!


提供一个思路吧。
当下拉框弹出的时候,在页面上设置一个宽100vw,高100vh的div遮罩层:
CSS:

        .layer-cover {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 2;
        }

HTML:

        <div class="layer-cover"></div>

为你的下拉框设置 z-index 大于2。

使用事件代理的方式为cover绑定点击事件,点击之后下拉框与cover层全部隐藏。


jquery blur事件
http://tool.oschina.net/apidocs/apidoc?api=jquery


blur事件,失去焦点。在你的下拉框绑定这个事件就好了。具体的使用跟介绍,百度就有,并不是JQ才有,原生JS即有

【热门文章】
【热门文章】