由于显示，SmartMenus在Chrome上不能正常工作:flex；

Question

对于一个新的项目，我使用Bootstrap 3和子菜单的SmartMenus加载项。

我的问题是，在Chrome (v 58)上，带有子菜单的链接上的插入符号在加载时正在消失，子菜单显示的是单击而不是悬停，当另一个菜单打开时，它们不会关闭。

不过，我已经找到了这个问题的根源。类.sm-collapsible在加载时应用于我的ul.navbar-nav元素。但是，只有当ul.navbar-nav元素具有display:flex;和Chrome时，它才会被应用。我尝试用display:table;和display:table-cell;复制我的布局，但它也不起作用。

所以这不是一个特别的flex问题，但是--它来自布局--它扰乱了JavaScript。

我不知道为什么，也不知道怎么可能。

您可以在这里查看一个在线版本：https://lesdeuxvagues.com/laloupe (悬停/单击目录查看该问题)

提前谢谢..。我真的被困在这里了。

编辑

我刚刚找到了添加.sm-collapsible类的负责任的JS行。下面是：

obj.isCollapsible = function() { return !/^(left|right)$/.test(this.$firstLink.parent().css('float')‌​);};

它总是在Chrome上返回true (当显示:flex；没有注释时)，但只在移动浏览器上返回Firefox和Edge。

Answer 1

我联系了插件的编辑，因为它似乎是插件编码方式的一个问题，现在它已经修复了。显示:flex；不再造成问题了。

Answer 2

您可以尝试在CSS中将ul.navbar-nav更改为display: block; (您可以修改bootstrap.less：#header #navbar > ul { display: block; }或在您自己的较少的文件中覆盖它)，或者通过查找负责添加和删除该操作的函数来修改插件的JS。

Answer 3

这对我来说很管用：

obj.isCollapsible = function() {
    return (!/^(flex)$/.test(this.$firstLink.parent().parent().css('display'))) && (!/^(left|right)$/.test(this.$firstLink.parent().css('float')));
};

注意： display: flex必须在ul.navbar-nav上