切换菜单按钮在索引页面上有效，但在其他页面上无效，尽管代码相同 - 为什么？

Question

花了几个小时试图解决我在切换菜单按钮时遇到的问题。在索引页面的小屏幕上完美运行 - 但不适用于投资组合和联系页面。尽管有相同的代码和文件（jquery & bootstrap 文件以相同的顺序附加）。有什么建议么？这是网站 link：https://www.jophilippa.com/

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="portfolio.html"></a><img src="../img/logo.jpg" class="logo" width="200" height="90" alt="Jo Philippa logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item"> <a class="nav-link" href="../index.html">ABOUT </a> </li>
     <li class="nav-item active"> <a class="nav-link" href="portfolio.html">PORTFOLIO <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li> 
    </ul>  
  </div>
</nav>

Answer 1

通过快速查看您的网站和源代码，您可以通过相对路径链接到您的 jquery 文件，更具体地说，我指的是这段代码：

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>

这在 https://www.jophilippa.com/ (as it loads https://www.jophilippa.com/js/jquery-3.4.1.min.js), but won't work at https://www.jophilippa.com/pages/portfolio.html, because that loads https://www.jophilippa.com/pages/js/jquery-3.4.1.min.js 有效，显然不存在。

在路径前加一个/，使它们从网站的根目录开始：

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap-4.4.1.js"></script>

切换菜单按钮在索引页面上有效，但在其他页面上无效，尽管代码相同 - 为什么？

toggle menu button works on index page but not on other pages despite identical code- why?

html

jquery

toggle

drop-down-menu