首页 > 如图所示;我点击按钮后,列表显示,我点击其他任意位置,列表消失,这个这么做?

如图所示;我点击按钮后,列表显示,我点击其他任意位置,列表消失,这个这么做?


增加一个占据全屏幕的透明容器 给容器加点击事件
不过一般都不这么做 给菜单加鼠标离开事件 菜单自动隐藏 这是比较常见 推荐使用这种方法


1、因为事件冒泡的原因,点击事件会逐级的向上的传播;在点击展示列表之后可以监听 document.body 的点击事件,如果用户点击了其他地方(点击的目标不是展示的列表),就隐藏该列表,并且清除 document.body 的监听事件。

2、也可以将点击展示列表修改为 hover 显示列表,鼠标离开该列表即隐藏。

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