Question

我使用了此链接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>

响应式Topnav汉堡菜单的JS代码在移动设备上不起作用

0 个答案: