优艾设计网_设计圈想知道原理，谢谢！
qayii 2022-09-10 12:04
没有细致研究过SF的代码，这里给你讲讲Bootstr优艾设计网_设计圈ap里的弹出菜单点击事件的逻辑吧，相信与SF的应用是类同的。
M25****6245 2022-09-10 12:07
在BS的弹出菜单控件中，它会先利用JavaScript监听整个document的点击事件。如果有对屏幕的点击，会把所有的弹出菜单进行关闭（隐藏）。而对于某一个弹出菜单界面，它也会通过JavaScript监听其弹出层范围内的点击事件。如果在此范围内进行了点击，则会阻断点击事件的冒泡。由于事件冒泡是从小到大进行的，所以事件是不会再传递到document上，也就不能让监听优艾设计网_PS交流document的JavaScript去关闭菜单了。
qkoufu1706 2022-09-10 12:08 优艾设计网_在线设计
对包含小铃铛菜单的DIVclass="opts__item--message"绑定一个click事件，点击的时候，用stopPropagation方法阻止事件传播。对document也绑定一个click事件，点击的时候，关闭打开的菜单。
我心依然 2022-09-10 12:09 优艾设计网_平面设计
目测可能是这样写的，那个铃铛class是opts__item--message，假定用的jQ
霞映澄塘半面妆发呆草疏清浅张先 2022-09-10 12:14
.opts__item--message为菜单，.m优艾设计网_Photoshop百科essage为铃铛和菜单的父级，整个的逻辑就是你点击页面，会冒泡到body，触发上述绑定的事件，如果菜单的display不为none，且你当前点击的不属于这个message这个div的子元素（页面结构可以自己看下）（属于这个子元素就是点击的菜单本身或者铃铛了），就hide
南楼清主 优艾设计网_PS交流 2022-09-10 12:17
body上绑定事件，单击消失，铃铛阻止事件冒泡
加载中,请稍侯......
精彩评论