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

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

阅读 9.5k
4 个回答

提供一个思路吧。
当下拉框弹出的时候,在页面上设置一个宽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层全部隐藏。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题