JS-код для отзывчивого меню topnav burger не работает на мобильном телефоне - PullRequest
Новая
       20

JS-код для отзывчивого меню topnav burger не работает на мобильном телефоне

0 голосов
/ 30 мая 2019

Я использовал код по этой ссылке https://www.w3schools.com/howto/howto_js_topnav_responsive.asp, который изначально отлично работал на моем сайте.

См. Код, работающий как на этой странице: http://vanessajaramillo.co.uk/index.html

Однако я хотел, чтобы мой верхний и нижний колонтитулы располагались в отдельных html-файлах, которые я мог затем вставить на html-страницы и мог изменять только в одном месте, а не делать это постранично.

Делая это, меню бургера перестало работать на мобильном телефоне, когда вы нажимаете его, оно больше не открывается, я предполагаю, что JS имеет некоторые помехи, но, поскольку я не эксперт, я не совсем уверен, как это исправить.

См. Код не работает, как предполагалось на этой странице: http://vanessajaramillo.co.uk/work.html

Я должен подчеркнуть, что это работало нормально, когда приведенный ниже код был добавлен к каждой отдельной странице, но когда код находится в одном месте /header.html и включен в страницы с функцией includeHTML () 

<header>
  <div class="container group">
    <h1><a href="index.html"><img src="images/logo.svg?342038402" height="43" width="43"></a></h1>
    <ul class="topnav">     
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li>
    </ul>

  <script>
    function myFunction() {   
        document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
        }
   </script>
  </div>
</header>
...