由于 display:flex，SmartMenus 在 Chrome 上无法正常工作；

Question

对于一个新项目，我将 Bootstrap 3 与 SmartMenus 插件一起用于子菜单。

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

我已经找到了这个问题的来源。 .sm-collapsible 类在加载时应用于我的 ul.navbar-nav 元素。 但是，仅当 ul.navbar-nav 元素在 Chrome 上具有 display:flex; AND 时才适用。我尝试使用 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（当 display:flex; 未注释时），但仅在 Firefox 和 Edge 的移动设备上。

Answer 1

这对我有用：

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 上

Answer 2

我联系了插件的编辑，因为插件的编码方式似乎有问题，现在已修复。显示：弹性；不再造成问题。

Answer 3

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