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即有