在Bootstrap中隐藏可关闭的警告框

Question

当我关闭一个可消除的提示框时，能否只隐藏它而不是把它从文档对象模型中删除？

<div class="alert alert-success alert-dismissible fade in" role="alert" if.bind="message">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>Success!</strong> ${message}
</div>

问题在于我现在没有使用jQuery。我需要aurelia根据标志或message的存在来显示/隐藏它。

它可以工作一次，但是一旦我将其关闭，它就会从DOM中删除，因此此后不会再出现新的消息。

- chovy

---

你可以使用一个类似于${dismissed?:'hidden':''}的切换类，而不是if.bind。 - Matt McCabe

Answer 1

除了if.bind之外，还有一个show.bind（manual），或者您可以使用hidden.bind绑定到默认隐藏属性。

正如Matt所述，您还可以使用字符串插值手动添加CSS类${!message ? 'hidden': ''}。

- Jan Van der Haegen

---

我认为在这种情况下，show.bind 是 @demo 寻找的东西，因为它只是将元素设置为 display: none;，但仍然保留在 dom 中。 - Ashley Grant

谢谢，我知道有更好的方法 :) 在我的情况下，我没有使用hidden，而是另一个类，所以我在那里添加了一些过渡效果。 - Matt McCabe

Answer 2

我会尝试这样做...

<div class="alert alert-success alert-dismissible fade-in ${dismissed ? 'hidden': ''}" role="alert">
    <button type="button" class="close" click.delegate="dismiss" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <strong>Success!</strong> ${message}
</div>

在 JavaScript 中：

dismiss() {
    this.dismissed = this.dismissed? true: false;
}

如果有更好的方法，请告诉我 :)

- Matt McCabe

Answer 3

对于我的 Flash 容器，它显示来自 Ajax 调用的响应消息，我设置了一个监听器来监听 close.bs.alert 事件，并将已删除的 HTML 再次添加到 DOM 中。

$("#flash-container").on("close.bs.alert","#flash-alert",
/* The container that will hold the #flash-alert. 
 * This setup is neccessary so that the event will be caught
 * when the HTML is added once again.
 */
    function (e) {      
        var $alert = $(this).addClass("d-none");
        /* Remove the existing text */
        $alert.find("#flash-container-text").empty();
        /* e.delegateTarget will be #flash-container */
        e.delegateTarget.innerHTML = $alert[0].outerHTML;       
});

- joacar