用户单击项目时如何隐藏抽屉?或者单击按钮时?

<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>

如果单击按钮时,如何隐藏抽屉,就像我在抽屉之外单击一样?我尝试模拟抽屉外部的click事件,但它仍然没有隐藏。

最佳答案

我相信您可以从is-visible中删除.mdl-layout__drawer类。我尝试从他们的站点demo修改codepen示例。我的纯JavaScript事件绑定(bind)是使用rust 的,但是正如我提到的,您只需要从抽屉中删除.is-visible类。

更新资料

我提供的代码是用于mdl的v1.0.0的,现在不再实际了。 v1.1.0开始,提供了一个公共(public)API,用于切换抽屉,如Benjamin's answer 中所述。如果您介于v1.0.6v1.1.0之间,请看看idleherb's answer

关于javascript - 如何在用户单击时隐藏抽屉,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31536467/

10-11 12:58
查看更多