Node.js项目中navbar-collapse按钮在部分视图失效，请求技术解决

我一眼就揪出问题根源啦——静态资源的相对路径错误导致Bootstrap折叠功能依赖的JavaScript文件加载失败，所以按钮没法正常工作！

问题原因拆解 #

当页面路由是 /blogs 时，相对路径 js/bootstrap.min.js 会被浏览器解析为 /js/bootstrap.min.js（正好对应你main/public/js/下的文件），所以能正常加载；但当路由是 /blogs/blog1 时，相对路径会被解析为 /blogs/js/bootstrap.min.js，而这个路径下根本没有你的JS文件，自然加载失败，Bootstrap的折叠功能也就彻底罢工了。

具体修复步骤 #

1. 修正blog1.html的JS引用路径
   把你当前的JS代码：

<script src="js/vendor/holder.min.js"></script>
<script src="js/bootstrap.min.js"></script>

改成绝对路径形式：

<script src="/js/vendor/holder.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

（给路径前加上/，强制浏览器从服务器根目录查找资源，不管当前页面在哪个路由下都不会出错）

2. 统一所有页面的静态资源引用规范
   为了避免以后再踩类似的坑，建议把blogs.html里的CSS和logo引用也改成绝对路径：

• CSS部分：

<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">

• Logo部分：

<img id="logo" src="/img/logo.png">

验证修复效果 #

修改完成后，刷新blog1.html页面，打开浏览器开发者工具（F12）切换到Network标签，确认所有CSS和JS文件的加载状态都是200（成功加载），这时再点击navbar的折叠按钮，应该就能正常展开/收起菜单了！

内容的提问来源于stack exchange，提问作者GJain