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

65 0

在写《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

0
  • 本文分类:bootstarp4
  • 本文标签:多级菜单bootstrap-submenu
  • 流行热度:已超过 65 人围观了本文
  • 发布日期:2020年04月11日 - 22时32分17秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码