如何在用户点击时隐藏抽屉 [英] How to hide drawer upon user click

问题描述

当用户点击某个项目时，如何隐藏抽屉？或者当点击按钮时？

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

<div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
          <i class="material-icons">add</i>
        </button>
</div>

如何点击按钮时，抽屉将被隐藏，就像我点击一样在抽屉外面？我尝试在抽屉外模拟一个点击事件，但它仍然没有隐藏。

How do I do it that when the button is clicked, the drawer will be hidden as if I clicked outside of the drawer? I tried simulating a click event outside of the drawer but it still does not hide.

推荐答案

我相信你可以删除<$来自 .mdl-layout__drawer 的c $ c> is-visible 类。我尝试从他们的网站修改codepen示例：演示。我的纯javascript事件绑定生锈了，但正如我所提到的，你只需要从抽屉中删除 .is-visible 类。

I believe you can remove the is-visible class from .mdl-layout__drawer. I tried modifying a codepen example from their site: demo. My pure javascript event binding is rusty, but as I mentioned, you just need to remove the .is-visible class from the drawer.

我提供的代码是针对mdl的 v1.0.0 而不是实际的了。 从 v1.1.0 开始，提供了一个用于切换抽屉的公共API，如本杰明的回答 。如果您介于 v1.0.6 和 v1.1.0 之间，请查看idleherb的回答。

The code I provided was for v1.0.0 of mdl and is not actual anymore. Starting at v1.1.0 there is a public API provided for toggling the drawer, as described in Benjamin's answer. If you're between v1.0.6 and v1.1.0, have a look at idleherb's answer.

这篇关于如何在用户点击时隐藏抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！