Javascript 单击另一个Snackbar时隐藏Snackbar

下面是我使用组件库编写的三个snackbar的代码：

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button1');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #1',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button2');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #2',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button3');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #3',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

---

现在我想在单击另一个Snackbar后立即隐藏一个Snackbar。目前，一旦6000毫秒上升，就会一个接一个地显示div。你能帮我做这个吗？非常感谢

鉴于此SnackBar组件提供的API，只能显示警报，不能隐藏警报。我建议您要么切换到一个更好的组件（这个组件过于简单），要么通过创建一个函数直接销毁所有现有警报，然后再显示新警报来绕过它。

有一种稍微有点黑客味的方法来实现这一点

var snackbarContainer = document.querySelector('#toast');

让我们定义一个处理程序来处理回调以隐藏snackbar

var handler = function(event) {
    snackbarContainer.classList.remove('mdl-snackbar--active');
    snackbarContainer.setAttribute("aria-hidden", "true");
};

现在，让我们展示snackbar，如下所示

var data = {
    message: 'Snack time!',
    timeout: 2000,
    actionHandler: handler,
    actionText: 'Dismiss'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);

---

就这些

我也遇到了这个问题。经过一番挖掘，我想出了一个小办法

使用以下代码更新新通知的当前通知

替换通常使用的

snackbar容器.materialsnakbar.showSnackbar（数据）带有：

snackbarContainer.MaterialSnackbar.cleanup_();
setTimeout(function(){
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
}, snackbarContainer.MaterialSnackbar.Constant_.ANIMATION_LENGTH)

我不熟悉javascript，但它似乎适合我

编辑：这似乎不是一个万无一失的方法，当前一个通知超时时，它会关闭新的通知。我还没有答案

编辑2：不是万无一失的，但如果要继续，您需要对
material.js
进行一些更改，以使其正常工作：

变更1:MaterialSnackbar=功能材料Nackbar（元素）

更改2:MaterialSnackbar.prototype.cleanup的开始处

改变3：用这个替换你的邮政编码。

---

我希望这能有所帮助。

在当前版本的Material Design lite中，您只需拨打

mySnackbar.MaterialSnackbar.cleanup_();

而且它会平滑地隐藏起来

mySnackbar.MaterialSnackbar.cleanup_();