本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考，具体如下：
模拟bootstrap下拉菜单
在工作中要切一个效果：点击导航栏，则出现下列菜单，但是当点击其他地方的时候，就隐藏子菜单，效果有点类似于bootstrap 的“下拉菜单”
由于bootstrap的子菜单的样式与设计不同，因此需要自己写一个类似的效果
当点击某个控件的时候，则显示出下拉菜单，但是，当点击空白的地方的时候怎么让其自动隐藏呢？
起初的想法，给body绑定一个onclick事件，当点击空白的地方由于事件冒泡，触发click body的事件，但是问题来了，点击控件的时候，同样会触发body的click事件，导致下拉菜单显示出来之后，有被收缩回去了，因此这个思路不正确
由于bootstrap已经实现了这个功能，查看其源代码，找到了解决思路：
给document绑定事件（隐藏其子菜单），当触发控件的方法时则阻止其冒泡，不让其触发绑定
分类
- 家政
- 蔬菜
- 零食
分类
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
