更新于

关于原生bootstarp4 二级菜单点击整个菜单消失的bug

发布于 / 分类: bootstarp4 / 暂无评论 / 阅读量: 193

在写《MUFlow》主题的时候,我遇到一个很头疼的问题,就是点击分类会显示分类菜单,但是这个菜单还会有子级菜单,按照嵌套规则,我对这个子级的菜单元素,用一个div包裹,并且加上了class类名dropdown-menu,然后里面的内容就按照官方的标准书写,但是就出现了一个问题。

当我点击子级菜单后,整个菜单都消失了。

一脸蒙蔽,什么鬼,难道我做错了,什么情况,在不断的对照不同人写的例子后,我崩溃了,然后无意间看到开发者控制台的class变化后,我大概有点知道为什么了。

当我点击子级菜单后,子级菜单对应的dropdown-menu元素是显示的,它的class有了show类名,但是一级菜单就没了,直接隐藏了,我想着这么坑啊,这么基本的操作难道是官方故意的??

百度了一些资料,但是都是比较模糊,反正就是说,这个东西需要我们自己写js来判断,并阻止bootstarp的事件,然后我照抄了一下对方写的js代码,有效果,但是有bug,它的判断不是很精准,如果只有一个子级菜单那就没问题 ,但是有多个的话,就会产生,点击子级菜单后,再点其他子级菜单,上一个子级菜单并不会自动关闭。

加上我确实对英文不咋地,官方的文档关键部分都特么的英文,拿去翻译也是云里雾里,看不懂他什么意思,连个示例都没有。

然后我找到了一个bootstarp的一个js插件,真是舒服,一口气解决了这个头痛的问题,并且只需要在原来的基础上,加个class就行了,实在是goog

插件下载 bootstrap-submenu

找了半天没有发现有官网,不过找到了一个github的库,目前已经有了400多次的fork,实在是牛逼啊,看开发者头像,是个国外大佬,不多说,贴链接。

bootstrap-submenu

我们只需要把bootstrap-submenu.js文件引入到需要的网页即可,插件的引入就不多说了,基本常识。

用法

在你的一级菜单触发元素上,就是dropdown-toggle这个元素上,加上一个属性,注意是属性不是类名:data-submenu

然后找到你的子级菜单的触发元素,也是子级的dropdown-toggle元素,加上该属性:data-submenu="true"

然后找到这个子级菜单的父元素dropdown,我开头说过了,子级菜单用一个div元素包裹,这个div的class就是dropdown,给他添加一个class名:dropdown-submenu,然后完事。

如果你有多个,就这样重复操作就行了,不懂可以看看demo

这个地址需要FQ,注意了;

demo

demo

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买