Есть ли способ загрузить полнофункциональную строку меню без PHP?

Question

В настоящее время я пытаюсь поместить строку меню моей HTML-страницы в отдельный файл без использования php.

Как мне правильно это настроить?

Использование php-файла недоступно из-за использования CMS (http://www.coast -cms.de , только на немецком языке). Поэтому мне нужно было сделать это без включения. Я почти заставил его работать так, как я хочу, используя 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-файл в свой существующий, прежде чем что-либо еще произойдет, но мой код, похоже, загружает файл в какой-то другой момент.

EDIT: Я использую 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 и иногда запускался после (другими словами), иногда элемент загружался AJAX быстро до того, как парсер получил JS, который вызывал dropotron в файле main.js, а иногда он загружался после).

Когда был вызван вызов dropotron до того, как элемент был загружен AJAX, ему не удалось найти что-либо для присоединения, поэтому он ничего не сделал.Когда он был вызван после того, как элемент был загружен AJAX, он обнаружил элемент и смог сгенерировать выпадающий список (следовательно, иногда панель навигации работает, а иногда не работает).

Чтобы устранить эту первую проблему, вы подтвердили, чтоиспользование обратного вызова для создания раскрывающегося списка после загрузки действительно вызывало раскрытие:

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

Однако затем возникла проблема, что он вызывался дважды в определенных ситуациях - это было связано сстрока dropotron вызывается в main.js, так же, как и первоначально, где иногда она запускается до завершения AJAX, а иногда и после;когда он побежал, он создал второе меню.

Окончательным решением было закомментировать строку в main.js, чтобы удалить второй вызов, и просто использовать обратный вызов AJAX, чтобы убедиться, что dropotron был вызван после загрузки элемента.