Bootstrap Offcanvas侧边栏内部链接点击无响应无法跳转问题求助

问题根源 #

你的代码中给offcanvas-body节点错误添加了折叠组件触发属性，对应代码如下：

<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">

这两个属性会让Bootstrap JS拦截整个offcanvas主体区域的所有点击事件，优先触发折叠逻辑，直接阻止了链接的默认跳转行为。而折叠功能已经绑定在"Links"按钮上，父级节点不需要重复添加触发属性。

修复步骤 #

• 直接删除offcanvas-body标签上的data-bs-target="experience-collapse"和data-bs-toggle="collapse"两个属性即可，修改后代码如下：

<div class="offcanvas-body px-0">

• 可选优化：Laravel项目中建议使用路由别名生成链接，避免硬编码路径后续出错，示例如下：

<!-- 先给对应路由设置别名，再用route辅助函数生成路径 -->
<li><a href="{{ route('link1.route.name') }}" class="rounded" id="link1"><i class="bi bi-arrow-down-up"></i>&nbsp;&nbsp;Link 1</a></li>

修改完成后点击侧边栏链接即可正常跳转，侧边栏开关、折叠菜单功能也不受任何影响。

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