有没有办法在没有 PHP 的情况下加载功能齐全的菜单栏？

Question

我目前正在尝试将我的 HTML 网页的菜单栏放入一个单独的文件中，而不使用 php。

如何正确设置？

由于我使用的是 CMS（http://www.coast-cms.de，仅限德语），因此无法选择使用 php 文件。因此我需要在没有包含的情况下这样做。通过使用jquery.load，我几乎让它按照我想要的方式工作。

导航栏已正确加载，但在我重新加载之前无法打开其中的下拉菜单，或者在某些页面上根本无法使用。

我怀疑这与加载脚本的顺序有关，但鉴于我对 jQuery 的经验有限，我既不知道如何对加载过程进行排序，也不知道哪个顺序是正确的。

<script src="assets/js/jquery-3.4.1.min.js"></script>

<div id="navbar"></div>
<script>
  $("#navbar").load( "/modules/navbar.html");
</script>

我希望能够在其他任何事情发生之前将另一个 html 文件粘贴到我现有的文件中，但我的代码似乎在其他时候加载了该文件。

编辑： 我将 jquery.dropotron 用于子菜单 https://github.com/ajlkn/jquery.dropotron

navbar.html

<header id="header">
               <h1 id="logo"><a href="index.html">Company Name</a></h1>
                <nav id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li>
                            <a href="" class="submenu">X</a>
                            <ul>
                                <li><a href="a.html">A</a></li>
                                <li><a href="b.html">B</a></li>
                                <li><a href="c.html">C</a></li>
                                <li><a href="d.html">D</a></li>
                                <li><a href="e.html">E</a></li>
                                <li><a href="f.html">F</a></li>

                            </ul>
                        </li>
                        <li><a href="ueber_uns.html">Über uns</a></li>
                        <li><a href="g.html">G</a></li>
                        <li><a href="h.html">H</a></li>
                        <li><a href="#FOOTER">Kontakt</a></li>
                    </ul>
                </nav>
            </header>

编辑 2： 我认为 main.js 中用于汉堡菜单的代码

a('<a href="#navPanel" class="navPanelToggle"></a>').appendTo(b);
        a('<div id="navPanel"><nav>' + a("#nav").navList() + '</nav><a href="#navPanel" class="close"></a></div>').appendTo(d).panel({
            delay: 500,
            hideOnClick: true,
            hideOnSwipe: true,
            resetScroll: true,
            resetForms: true,
            side: "right"
        });

Answer 1

终于明白了。问题只是加载脚本的顺序。 解决的问题是确保在整个页面加载完成之前未加载 main.js（其中下拉菜单和汉堡菜单都被激活）。

我通过以下代码实现了这一点：

<script>$(document).ready(function() {$.getScript("assets/js/main.js");});</script>

Answer 2

为可能遇到此问题的其他人“总结”我们的评论讨论 - 问题是下拉菜单脚本（使用 jquery.dropotron）最初偶尔在 AJAX 加载元素之前运行，偶尔在之后运行（换句话说, 有时元素在解析器到达main.js 文件中调用dropotron 的 JS 之前由 AJAX 快速加载，有时它是在之后加载的）。

在 AJAX 加载元素之前调用 dropotron 调用时，它找不到要附加的任何东西，所以它什么也没做。在 AJAX 加载元素后调用它时，它找到了元素并能够生成下拉列表（因此导航栏有时工作有时不工作）。

为了缓解第一个问题，您确认在加载后使用回调来创建下拉列表，事实上，总是会产生一个下拉列表：

$('#navbar').load('/modules/navbar.html', function() { 
  $('#nav ul').dropotron(); 
});

但是，随后的问题是它在某些情况下被调用了两次 - 这是由于 dropotron 行在 main.js 中被调用，以与最初相同的方式，有时它会在AJAX 完成，有时在之后；当它运行后，它创建了第二个菜单。

最后的解决方案是注释掉main.js中的那一行，去掉第二个调用，只用AJAX回调保证元素加载后调用dropotron。