Bootstrap 5灰度模板添加Cookie横幅无显示问题排查

• 异步脚本加载顺序问题
  你给cookie横幅的脚本加了async属性，这会让脚本在DOM未完全渲染时就执行，导致脚本找不到目标横幅元素。去掉async，改成同步加载：

  <script src="./cookie/cookie-banner.js"></script>
  

• 文件路径错误
  检查cookie-banner.css和cookie-banner.js的路径是否正确。打开浏览器F12的「网络」面板，刷新页面看这两个文件是否返回404——如果是，说明路径写错了，调整成和实际文件位置匹配的路径。

• Bootstrap依赖未正确引入
  这个横幅依赖Bootstrap 5的alert等样式组件，确认你的Grayscale模板已经正确引入Bootstrap的CSS（要在cookie横幅CSS之前加载），必要时也要确保Bootstrap JS已加载（顺序在cookie横幅JS之前）。

• 已存在同意Cookie导致横幅隐藏
  插件点击「I Got It」后会存储同意Cookie，后续加载页面时会自动隐藏横幅。可以在浏览器F12的「应用」面板里找到Cookie项，删除相关的同意Cookie，再刷新页面测试。

• DOM元素ID不匹配
  确认横幅div的ID是cb-cookie-banner，和脚本中查找的元素ID完全一致——如果ID写错，脚本无法定位到横幅，自然无法控制其显示。

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