Question

我知道我的问题与其他许多问题相似，但我还没有找到解决问题的答案。我试图在几个页面上使用响应式菜单，所以我将它的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 - 没有区别。哦，是的...没有Dev Tools控制台中的错误。如果我将菜单的HTML输入到index.html页面，它在所有浏览器中都能很好地工作，所以CSS或JS文件中的代码没有任何问题。

有没有人有任何想法，为什么我不能让这个.load（）在Chrome中正常工作？任何指导都非常感谢。虽然它不会投放，但我发布了 my code here 。

Answer 1

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

$(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();
    });
});

Updated your demo with these adjustments

PS：对不起之前的不完整评论，只是快速浏览一下你的代码......

HTML文件的jQuery .load（）在Chrome中不能始终如一

1 个答案: