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

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