Question

我有一个引导警报框

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

使用按钮显示警告

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

执行以下功能以显示警报。

{{1}}

单击X关闭警报后，单击＆＃34;显示警报＆＃34;按钮不再显示警报。将aria-hidden设置为false需要做什么？

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

Answer 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>

使用jQuery显示aria-hidden元素

1 个答案: