使动态警报出现的按钮只出现一次，然后停止

Question

我使用Bootstrap，我有一个可按下按钮出现的可折叠div，然后在5秒后消失。 问题是，它只能使用一次。当我再次按下按钮时，在div消失后，没有任何反应。 我能做些什么来使按钮重复一次再次按下的动作？ 这里是我的代码：

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="collapse" data-target="#aparecer1"> 
    Suscribir 
</button> 

<div id="aparecer1" class="alert alert-warning collapse"> 
    This is an alert 
</div> 

$("button").click(function() { 
    setTimeout(function() { 
     $('#aparecer1').fadeOut('fast'); 
    }, 5000); 
}); 

非常感谢！

Answer 1

有两个原因不起作用。首先，将​​呼叫结果display: none设置在内联元素上，该元素覆盖样式以在下一次单击时应用该元素。它需要被删除。您还需要删除由Bootstrap添加的元素上的in类。您可以在​​回调做这两个动作，就像这样：

$("button").click(function() { 
    setTimeout(function() { 
     $('#aparecer1').fadeOut('fast', function() { 
      $(this).css('display', '').removeClass('in'); 
     }); 
    }, 5000); 
}); 

Example fiddle

Answer 2

不要完全隐藏你的警报标记。只要删除类insted它将解决您的问题。

$("button").click(function() { 
    setTimeout(function() { 
     $('#aparecer1').removeClass('in'); 
    }, 5000); 
}); 

Updated Fiddle