jquery - Bootstrap 3 自定义多级菜单不适用于较小的分辨率

Question

我正在使用 Bootstrap 3 创建一个 HTML 模板，以便我们使用自定义 CMS。您可以在此处找到演示 HTML 页面: http://clienti.stefanoginella.com/loreal/pagina-prodotto.html

我使用这个“hack”创建了一个多级自定义子菜单(单击 PRODOTTI，您将看到它)http://www.bootply.com/92442和 YAMM http://geedmo.github.io/yamm/

有一些自定义 JS 可以让它在这里工作 http://clienti.stefanoginella.com/loreal/js/loreal.js从第 71 行开始，最后一部分。

在“桌面”模式下，它工作得很好。但是如果你缩小浏览器，当菜单折叠到移动版本时，它就不再起作用了。

我试过的是这个(没有一个解决方案有效)

• 删除两个导航栏之一
• 删除 YAMM CSS
• 删除自定义 JS

折叠菜单仍然不起作用。它打开并在几分之一秒后突然自动关闭。

您知道为什么会发生这种情况以及如何解决吗？

非常感谢

斯特凡诺

Answer 1

loreal.css 中的第 166 行导致了问题 - 如果您使用网络检查器将其注释掉，菜单会正确显示/隐藏。

.navbar-collapse.collapse { display:none !important; }

如果您希望移动导航更早启动，您需要在 bootstrap css 中找到正确的媒体查询并调整它的宽度值，或者复制您需要的所有位并将其放入您自己的 css(看起来像你已经尝试过了，但还没有完全掌握!)。