Bootstrap可关闭Alert页面加载时持续显示问题求助

首先得澄清一个常见误区：aria-hidden="true" 这个属性完全不是用来控制元素视觉上的显示/隐藏的！它的作用是告诉屏幕阅读器等辅助技术忽略这个元素，和你看到的Alert是否显示没有半毛钱关系，这就是为什么你加了它Alert还是会出来的原因。

下面给你两个最直接的解决办法：

方法一：用Thymeleaf条件渲染（推荐） #

既然你的Alert里用了Thymeleaf的th:text="${error}"，那最好的方式就是只有当错误信息存在时才渲染这个Alert，这样页面加载时如果没有错误，Alert根本不会出现在DOM里，自然就不会显示了。修改后的代码如下：

<div th:if="${error != null and error != ''}" class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong th:text="${error}"></strong>
</div>

这里还顺便修正了无障碍属性：给关闭按钮加上了aria-label="Close"，让屏幕阅读器能识别这个按钮的作用，同时保留了span上的aria-hidden="true"，避免屏幕阅读器读出“×”这个符号。

方法二：初始隐藏Alert，按需显示 #

如果你需要Alert始终存在于DOM中，只是默认隐藏，那可以给Alert容器加上Bootstrap的d-none类，它会通过CSS把元素设置为display: none：

<div class="alert alert-warning alert-dismissible d-none" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong th:text="${error}"></strong>
</div>

之后当需要显示Alert时（比如后端返回了错误信息），可以通过JavaScript移除d-none类：

// 假设error存在时执行这段代码
document.querySelector('.alert').classList.remove('d-none');

或者用Thymeleaf的条件类来动态添加/移除：

<div class="alert alert-warning alert-dismissible" th:classappend="${error != null and error != ''} ? '' : 'd-none'" role="alert">
  <!-- 按钮和内容不变 -->
</div>

额外检查项 #

别忘了确保你已经正确引入了Bootstrap的JavaScript文件（以及它依赖的jQuery和Popper.js，如果是Bootstrap 4的话），否则点击关闭按钮时Alert可能不会正常消失哦。

试试上面的方法，应该就能解决你的问题啦！

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