使用 Bootstrap 的动态菜单答案

【问题标题】：Dynamic menu using Bootstrap使用 Bootstrap 的动态菜单
【发布时间】：2013-03-06 18:22:38
【问题描述】：

我正在开发一个大约 10-15 页的小网站，完全用 Bootstrap 制作，我开始想知道，有没有一种简单的方法来制作动态菜单（这意味着我不需要在每一页上都更新它如果我添加、删除或重命名页面）对于像我这样的菜鸟？

我认为这是完美的，所以我制作了一个单独的菜单文件并导入了代码。问题是，由于只有一个菜单文件，我无法将 class="active" 属性应用于我当前正在查看的菜单页面/部分。有没有办法做到这一点？非常感谢和抱歉英语，我不是母语人士。

【问题讨论】：

您在加载 html 内容后是否应用了class="active"？因为，一旦添加了内容，它的行为就应该像任何普通页面一样......
不，这就是问题所在，class="active" 在菜单文件中，我不知道是否有办法将它添加到单个页面中（类似于 css 覆盖但使用 html）
如果您在加载 html 页面的页面上的 css 中有 class="active"，那么加载的内容应该遵循该 css...除非我有棒子的错误末端！
css 在附加代码中，而不是加载它的那个。
你有例子/代码吗？如果加载页面中有 css，则加载的代码将遵循该 css 样式。因此，如果您将 css 从加载的页面移动到正在加载的页面，它应该可以工作......

【解决方案1】：

如果您正在向页面附加数据，然后尝试对其进行 jQuery 翻转/鼠标输入，则需要在其上使用 .live() 函数，以便 jQuery 知道元素已添加：

$('.menuitem').live('mouseover',function(){
    //-- script here --//
});

希望这会有所帮助！

如果您可以访问 PHP，将菜单内容放入 .php 文件中然后包含它会更容易：

include("menu.php");

这意味着菜单将被添加到服务器端（在浏览器加载页面之前）并且 jQuery 可以正常工作。

【讨论】：