Question

这是使用Material Design Lite组件库的三个Snackbars的代码：

C_2

现在我想在点击另一个Snackbar后立即隐藏它。目前，一旦6000ms上升，div就会一个接一个地显示出来。你能帮帮我吗？非常感谢！

Answer 1

鉴于此SnackBar组件提供的API，只能显示警报并且无法隐藏它。我建议切换到更好的组件（这个过于简单化）或通过创建一个在显示新的警报之前直接销毁所有现有警报的功能来破解它。

Answer 2

实现这一目标有一种轻微的方法。

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

让我们定义一个处理回调来隐藏快餐栏的处理程序，

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

现在，让我们按照以下方式展示小吃吧，

conda install scikit-learn

这就是全部！

Answer 3

我也遇到了这个问题。经过一番挖掘，我想到了一个小技巧。

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

将通常使用snackbarContainer.MaterialSnackbar.showSnackbar(data);的位置替换为：

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

我是javascript新手，但它似乎对我有用。

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

Answer 4

在当前版本的Material Design lite中，您可以致电

mySnackbar.MaterialSnackbar.cleanup_();

它会平滑隐藏。

单击另一个时隐藏Snackbar

4 个答案: