JS模拟bootstrap下拉菜单效果实例
本篇章节讲解JS模拟bootstrap下拉菜单效果。分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的“下拉菜单” 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的地方由于事件冒泡,触发click body的事件,但是问题来了,点击控件的时候,同样会触发body的click事件,导致下拉菜单显示出来之后,有被收缩回去了,因此这个思路不正确 由于bootstrap已经实现了这个功能,查看其源代码,找到了解决思路: 给document绑定事件(隐藏其子菜单),当触发控件的方法时则阻止其冒泡,不让其触发绑定 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》 希望本文所述对大家JavaScript程序设计有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angularjs – 创建更新ng模型的angular-js指令
- unix – 为什么OpenSSH RequestTTY导致stderr重定向到stdou
- bash – 有一个简单的方法为一个glob设置nullglob
- 如何在angular2 webpack中使用jquery?获得$not defined
- wraper for bootstrap3.0 + simple_form
- AngularJS(二)
- angularjs – ngOptions导致选项具有错误的值
- 使用docker-compose在构建时将环境变量传递给docker镜像
- shell 数组操作
- bash – sed追加从stdout获得的文本