1

我知道我的问题与许多其他问题类似，但我还没有找到解决我问题的答案。我正在尝试在多个页面上使用响应式菜单，因此我已将其 HTML 代码放在一个单独的文件中……减去 HTML、HEAD、BODY 标记。我们称之为 menu.html。菜单需要 CSS 和 JS 文件，我在 index.html 中引用了这些文件。CSS 在 HEAD 中加载，JS 文件在结束 BODY 标记之前加载。我希望菜单出现的地方有：

<div id="topMenu"></div>
<script>$('#topMenu').load('vgg_menu.html');</script>

我在虚拟服务器上拥有所有文件，因此没有在本地运行任何文件。奇怪的是……菜单在 IE8 中运行得很棒。在 Chrome 和 FireFox 中，父菜单项会显示并且其样式应为应有的样式，但下拉/子菜单项不起作用。但是...打开开发工具面板后，菜单将起作用。去搞清楚！我刷新页面，菜单不起作用...我打开开发工具面板，菜单起作用。

就像我说的，我已经尝试了在其他帖子中找到的所有建议。我是否使用“$（document）.ready（function（）”都没关系。它不起作用。我已经尝试为菜单动态加载CSS - 没有区别。哦，是的......不开发工具控制台中的错误。如果我在 index.html 页面上输入菜单的 HTML，它在所有浏览器中都运行良好，因此 CSS 或 JS 文件中的代码没有任何问题。

有谁知道为什么我不能让这个 .load() 在 Chrome 中正常工作？非常感谢任何指导。虽然它不会运行，但我已经在这里发布了我的代码。

4

1 回答 1

1

AJAX 请求（在您的情况下通过jQueryload(url, complete)函数）是异步的，这意味着在您的 .html 文件中的内容可用于 dom 之前需要一些时间，同时您的脚本会继续执行。这就是问题所在。当文档准备好时，您adjustMenu在将元素添加到 dom 之前调用。要解决此问题，您只需传递adjustMenu给.load()完整的回调函数。当 ajax 请求完成时会调用 complete 回调。

$(document).ready(function() {
    $('#topMenu').load('menu.html', adjustMenu);

    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    });

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
});

使用这些调整更新了您的演示

PS：抱歉之前的评论不完整，只是快速浏览了您的代码...

于 2013-11-06T01:11:41.877 回答