如何在 Bootstrap 中显示和隐藏警报答案

【问题标题】：How to show and hide an alert in Bootstrap如何在 Bootstrap 中显示和隐藏警报
【发布时间】：2019-08-02 15:10:34
【问题描述】：

如何显示和隐藏 Bootstrap 警报？

我尝试过使用$().alert("open")，但这似乎无法解决问题：

// Hide the alert when DOM loads:
$("#alert").alert("close");

// Show alert on given info click:
$("#info").click(function() {
  console.log("Got clicked");
  $("#alert").alert();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

引导provides 方法关闭警报，但不（重新）打开这些警报。我可以简单地选择使用$.show() 和$.hide()，但这是应该的方式吗？

我将无法再使用data-dismiss="alert"：

//$("#alert").alert("close");
$("#alert").hide();

$("#info").click(function() {
  console.log("Got clicked");
  $("#alert").show();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert">
    <button type="button" class="close" onclick="$('#alert').hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

【问题讨论】：

我认为您混淆了 JQuery 和 Bootstrap。 Bootstrap 所做的只是为常规的alerts 提供样式。 jQuery 提供$().show/hide。浏览器对象模型提供了window 对象，alert() 是一个方法。
但是data-dismiss 不是 JQuery 吗？这是 Bootstrap 用来运行 JQuery $().alert() 功能的 HTML 属性？
没有。该属性仅提供样式。 JavaScript 都是 JQery。
我认为最短的方法是简单地使用onclick="$(....).toggle()" 之类的东西。还要注意用小号c 写onclick，一些（旧）浏览器会出现大小写错误的问题。
@Barrosy 您在 cmets 中的最后一个问题的答案是 yes。 Bootstrap 警报除了闪烁您的消息并从 DOM 中删除 (.alert) 容器元素外，并没有做更多的事情。你可以用它做任何你想做的事（比如你的第二个示例代码块），我认为它无论如何都不会损害 DOM（当然，除非你做了一些疯狂的事情）

标签： javascript jquery html twitter-bootstrap-3

【解决方案1】：

您只能使用show 方法来实现这一点。

//$("#alert").alert("close");

$("#info").click(function() {
  $("#alert").show();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible" role="alert" id="alert" hidden>
    <button type="button" class="close" onClick="$('#alert').hide();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

【讨论】：

除了使用$().show()你使用$().toggle()之外，这和我在上一个解决方案中提供的不一样吗？
我不是在寻找淡入淡出效果，而是在寻找问题的答案：我应该如何使用 Bootstrap 标准显示和隐藏警报？显然，根据 Fr0zenFyr 的副本，我应该编写自己的 javascript（我已经在我的问题中提供了）。顺便说一句，您尝试添加的淡入淡出正在创建一个错误（垃圾邮件单击信息按钮，您会注意到警报一旦打开就会消失）。
为什么要隐藏现有的警报然后再次显示？如果它已经显示不需要隐藏它。引导程序中没有重新打开方法。只需使用show 方法。

【解决方案2】：

有一种方法可以仅使用引导程序来完成此操作。为此，您必须使用引导程序 collapse。

要摆脱折叠动画，您可以添加以下 css：

.alert.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

要了解有关折叠的更多信息，请查看its documentation。

.alert.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <label class="" for="">
      Checkbox&nbsp;<span class="glyphicon glyphicon-info-sign" id="info" data-toggle="collapse" href="#alert"></span>
    </label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" value="option1" aria-label="..."> Sample
      </label>
    </div>
  </div>
  <div class="alert alert-info alert-dismissible collapse" role="alert" id="alert">
    <button type="button" class="close" data-toggle="collapse" href="#alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Note: </strong> Test... and that is that. <a href="#" class="alert-link">More info</a>
  </div>
</form>

【讨论】：