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

Posted 2023-05-08

【中文标题】尽管代码相同，但切换菜单按钮在索引页面上有效，但在其他页面上无效 - 为啥？

【英文标题】：toggle menu button works on index page but not on other pages despite identical code- why?尽管代码相同，但切换菜单按钮在索引页面上有效，但在其他页面上无效 - 为什么？

【发布时间】：2021-08-23 17:26:00

【问题描述】：

花费数小时试图解决我在切换菜单按钮时遇到的问题。在索引页面的小屏幕上完美运行 - 但不适用于投资组合和联系页面。尽管代码和文件相同（jquery 和引导文件以相同的顺序附加）。有什么建议？这是网站链接：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"   />
<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> 

【参考方案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/（因为它加载https://www.jophilippa.com/js/jquery-3.4.1.min.js），但不适用于https://www.jophilippa.com/pages/portfolio.html，因为它加载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>

【讨论】：

确实如此，基本上添加 : ../ 这是浏览器先向上一个子目录的指令（所以从 jophilippa.com/pages 转到 jophilippa.com ）然后下降到 js 目录（ jophilippa.com/js)，查找、读取和执行 .js 文件，其中包括 bootstrap-4.4.1.js 。