如何在用户点击时隐藏抽屉

Question

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

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

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

Answer 1

toggleDrawer现在是@ be54f78以来的公共功能 .

var layout = document.querySelector('.mdl-layout');
layout.MaterialLayout.toggleDrawer();

目前不适用于v1.0.6,因此您需要从源代码构建(截至今天).

Answer 2

我相信你可以删除该is-visible课程.mdl-layout__drawer.我尝试从他们的网站修改一个codepen示例:demo.我的纯javascript事件绑定是生锈的,但正如我所提到的,你只需.is-visible要从抽屉中删除该类.

更新

我提供的代码是针对v1.0.0mdl的,而不再是实际代码.从本杰明的回答中v1.1.0可以看出,有一个公共API用于切换抽屉.如果你介于v1.0.6和之间v1.1.0,请看看idleherb的答案.

Answer 3

基于GitHub话语,我有一些工作解决方案(希望很快得到解决)在点击链接时关闭MDL抽屉的问题.目前我正在使用:

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}

document.querySelector('.mdl-layout__drawer').addEventListener('click', close);

其他变化是:

1.

document.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  document.querySelector('.mdl-layout__obfuscator').classList.remove('is-visible');
  this.classList.remove('is-visible');
}, false);

2.

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

讨论中的某个人提到了定位的想法,querySelector以便不要求查看整个文档,我想出了以下两个变体:

3.

var drawer_container = document.getElementsByClassName('mdl-layout')[0]; 
# no IDs in the html code.
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  var obfuscator = document.querySelector('.mdl-layout__obfuscator');
  if (obfuscator.classList.contains('is-visible')) {
    obfuscator.classList.remove('is-visible');
    this.classList.remove('is-visible');
  }
}, false);

4.

function close() {
  var d = document.getElementsByClassName('mdl-layout__container')[0].querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

在我的两个版本中,浏览器必须运行document.getElementsByClassName以及有针对性的 querySelector调用.

在我的第一个版本中还有一个检查:classList.contains('is-visible')有人推荐,但这似乎是不必要的,因为该函数是从一个只有可见的项目调用的classList.contains('is-visible').

添加以下调用我的每一个变化(#3和4)的,内的功能:

console.time("anonymous");
console.timeEnd("anonymous");
console.time("close function");
console.timeEnd("close function");

而if声明中的那个就在.39ms.如果没有if声明,他们都会参与其中.19ms.但我也没有测量getElementsByClassName和querySelector方法,如果我理解正确,正在页面加载运行.

当我跑console.time("first");,并console.timeEnd("first");通过第一,和对我来说,最漂亮的代码,当时是23ms.

显然ie8,我想支持,不支持getElementsByClassName.

我希望有人可以提供并解释这个相对简单的问题的最佳解决方案.

这是CodePen(不是我的).