有没有办法在没有 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

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

在 AJAX 加载元素之前调用 dropotron 调用时，它找不到要附加的任何内容，因此它没有执行任何操作。 AJAX 加载元素后调用它时，它找到了元素并能够生成下拉列表（因此导航栏有时工作，有时不工作）。

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

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

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

最后的解决方案是注释掉main.js中的那一行，去掉第二次调用，只用AJAX回调来确保dropotron在元素被调用之后被调用已加载。

Answer 2

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

我用下面的代码实现了：

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

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

Is there a way to load a fully functional Menu Bar without PHP?

html

jquery

content-management-system