Question

在我的页面中，使用此警报显示服务器的响应：

    <div id="yes" class="alert alert-success" role="alert" style="display: none;">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <strong>Pronto!</strong> cadastro efetuado com sucesso! 
    </div>

当我点击警报中的关闭按钮时，是否有任何方法可以隐藏而不是从页面中删除？我试试这个（按照here的说明），没有成功：

$('#my-alert').on('close.bs.alert', function () {
  $(this).hide();
})

更新

我也试试这个：

    $('button.close').on("click", function(){
        $(this).parent().hide();
    });

但仍然是同样的问题，当我点击关闭按钮时，警报就会被删除。

Answer 1

解决方案我发现了这个问题：

创建一个用于隐藏元素的新数据属性。

使用Javascript：
$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide();
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});
然后将数据关闭更改为数据隐藏在标记中。例子在的jsfiddle。
$("." + $(this).attr("data-hide")).hide();
这将使用data-hide中指定的类隐藏所有元素，即：data-hide =＆＃34; alert＆＃34;将使用警报类隐藏所有元素。

基于此主题中发布的答案：Twitter Bootstrap alert message close and open again

Answer 2

我尝试过这些解决方案，但不适合我。只需从标记中删除“data-dismiss”属性并创建新函数即可完成此操作：

nth-child()

Answer 3

使用bootstrap close.bs.alert事件：

$('.alert').on('close.bs.alert', function (event) {
    event.preventDefault();
    $(this).addClass('hidden');
  });

Answer 4

在上述评论的帮助下完成并删除了“data-dismiss”

$('.close').on('click', function(e) {
     $('.alert').fadeOut();
});

Answer 5

你做错了试试这个，因为在你的情况下按钮类是关闭的，div id是肯定的

$('button.close').on('click', function () {
  $("#yes").hide();
})

单击关闭按钮时隐藏警报而不是删除它

5 个答案: