Twitter Bootstrap警报消息closures并再次打开
警告消息有问题。 它是正常显示，我可以closures它，当用户按下x （closures），但是当用户试图再次显示它（例如，点击button事件），那么它不会显示。 （此外，如果我打印这个警报消息到控制台，它等于[] 。）我的代码在这里：
<div class="alert" style="display: none"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
事件：
$(".alert").show();
PS！ 只有在发生某些事件（例如，button点击）之后，我才需要显示警报消息。 或者我做错了什么？
数据closures完全删除元素。 改用jQuery的.hide（）方法。
快速修复方法：
使用内联JavaScript来隐藏元素onclick像这样：
<div class="alert" style="display: none"> <a class="close" onclick="$('.alert').hide()">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> <a href="#" onclick="$('alert').show()">show</a>
这应该只能用于懒惰（如果你想要一个可维护的应用程序，这是没有好处的）。
做正确的方法：
创build一个新的数据属性来隐藏一个元素。
使用Javascript：
$(function(){ $("[data-hide]").on("click", function(){ $("." + $(this).attr("data-hide")).hide(); // -or-, see below // $(this).closest("." + $(this).attr("data-hide")).hide(); }); });
然后将数据closures更改为数据隐藏在标记中。 例如在jsfiddle 。
$("." + $(this).attr("data-hide")).hide();
这将隐藏数据隐藏中指定类的所有元素，即： data-hide="alert"将隐藏所有具有alert类的元素。
Xeon06提供了一个替代解决scheme：
$(this).closest("." + $(this).attr("data-hide")).hide();
这只会隐藏最近的父元素。 如果你不想给每个警报一个独特的类，这是非常有用的。 但是，请不要这样，您需要将closuresbutton放在警报中。
。jquery doc中.closest的定义：对于集合中的每个元素，通过testing元素本身并遍历DOM树中的祖先来获取匹配select器的第一个元素。
我只是使用模型variables来显示/隐藏对话框，并删除了data-dismiss="alert"
例：
<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">×</button> <strong>Error ! </strong>{{vm.exception}} </div>
为我工作，并停止需要出去jQuery
如果您使用的是诸如knockout.js（我强烈build议）的MVVM库，则可以更干净地进行操作：
<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert"> <button type="button" class="close" data-bind="click:function(){showAlert(false);}> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> Warning! Better check yourself, you're not looking too good. </div>
我也遇到了这个问题，简单地按下closuresbutton的问题是，我仍然需要访问标准的引导警报closures事件。
我的解决scheme是编写一个小的，可定制的jquery插件 ，以最小的麻烦注入一个正确形成的Bootstrap 3警报（有或没有closuresbutton），并允许您在closures该框后方便地重新生成它。
有关使用，testing和示例，请参阅https://github.com/davesag/jquery-bs3Alert 。
我同意Henrik Karlsson发表的，Martin Prikryl编辑的答案。 我有一个build议，基于可访问性。 我会将.attr（“aria-hidden”，“true”）添加到结尾，以便它看起来像：
$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
所以如果你想要一个可以处理dynamichtml页面的解决scheme，就像你已经包含了它一样，你应该使用jQuery的live来设置所有现在和将来在dom中的元素的处理器，或者被删除。
我用
$(document).on("click", "[data-hide-closest]", function(e) { e.preventDefault(); var $this = $(this); $this.closest($this.attr("data-hide-closest")).hide(); });
.alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .alert { border: 1px solid transparent; border-radius: 4px; margin-bottom: 20px; padding: 15px; } .close { color: #000; float: right; font-size: 21px; font-weight: bold; line-height: 1; opacity: 0.2; text-shadow: 0 1px 0 #fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="alert alert-success"> <a class="close" data-hide-closest=".alert">×</a> <strong>Success!</strong> Your entries were saved. </div>
我认为这个问题的一个好方法是利用Bootstrap的close.bs.alert事件types来隐藏警报，而不是删除它。 Bootstrap公开此事件types的原因是，您可以覆盖从DOM中删除警报的默认行为。
$('.alert').on('close.bs.alert', function (e) { e.preventDefault(); $(this).addClass('hidden'); });
这个问题是由于使用style="display:none" ，所以你应该用Javascript隐藏警报 ，或者至less在显示的时候去掉样式属性。
根据其他答案和更改数据 – 将数据隐藏到数据隐藏，本示例处理从链接打开警报，并允许重复打开和closures警报
$('a.show_alert').click(function() { var $theAlert = $('.my_alert'); /* class on the alert */ $theAlert.css('display','block'); // set up the close event when the alert opens $theAlert.find('a[data-hide]').click(function() { $(this).parent().hide(); /* hide the alert */ }); });
我已经尝试了所有的方法，对我来说最好的方法是使用内置的引导类.fade和.in
例：
<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>
注意：在jQuery中，addClass（'in'）显示警报，removeClass（'in'）隐藏它。
有趣的事实：这适用于所有元素。 不只是警报。
