使用 jQuery 显示 aria-hidden 元素答案

【问题标题】：Displaying an aria-hidden element with jQuery使用 jQuery 显示 aria-hidden 元素
【发布时间】：2016-02-13 00:52:45
【问题描述】：

我有一个引导警告框

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div id="errorText">
        ERROR!
    </div>
</div>

显示我正在使用按钮的警报

<button type="button" onClick="showAlert()" >Show Alert</button>

它执行以下函数来显示警报。

function showAlert(){
    $('.alert-danger').show();
}

单击 X 关闭警报后，单击“显示警报”按钮不再显示警报。我需要做什么才能将 aria-hidden 设置为 false？

这是一个 jsFiddle，但由于某种原因，它甚至不显示初始警报。 https://jsfiddle.net/3ytoz79p/

【问题讨论】：

看看我下面的更新，如果你不介意按钮也隐藏警报，.toggle() 会比我原来的答案短

标签： jquery twitter-bootstrap-3

【解决方案1】：

aria-hidden="true" 实际上并不是这里的罪魁祸首。问题实际上是data-dismiss="alert" 没有隐藏警报，它将它从 DOM 中删除。单击关闭按钮后，您可以通过检查 DOM 来看到这一点。

要做你想做的事，你可以把你的代码改成这样：

$('.close-alert').click(function(event){
  $('.my-alert').hide();
});

$('.show-alert').click(function(event){
  $('.my-alert').show();
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-alert alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close close-alert"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="errorText">
    ERROR!
  </div>
</div>
<button type="button" class="show-alert" >Show Alert</button>

您也可以使用以下方法使其更短：

$('.toggle-alert').click(function(){
  $('.my-alert').toggle();
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-alert alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close toggle-alert"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="errorText">
    ERROR!
  </div>
</div>
<button type="button" class="toggle-alert" >Toggle Alert</button>

【讨论】：