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

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

我相信您可以从 .mdl-layout__drawer 中删除 is-visible class。我尝试从他们的站点修改代码笔示例：demo。我的纯 javascript 事件绑定已生锈，但正如我提到的，您只需从抽屉中取出 .is-visible class。

更新

我提供的代码是针对 v1.0.0 的 mdl，不再是实际的了。 从 v1.1.0 开始，有一个 public API 用于切换抽屉，如 . If you're between v1.0.6 and v1.1.0, have a look at 中所述。

Answer 2

显示和隐藏菜单就像添加和删除 .is-visible class 一样简单 in the source:

MaterialLayout.prototype.drawerToggleHandler_ = function() {
  'use strict';

  this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
};

所以你会得到这样的东西：

function toggle_drawer() {
  var drawer = document.getElementsByClassName('mdl-layout__drawer')[0];
  drawer.classList.toggle("is-visible");
}

我希望 MaterialLayout 小部件有一个更方便的方法，但我想到的最好方法是：

var layout = document.getElementsByClassName('mdl-layout')[0];
layout.MaterialLayout.drawerToggleHandler_();

虽然这恰好有效，但方法名称末尾的 _ 表明此函数不应（误）用作 public API方法。

Answer 3

对于版本 1.0.6，您必须从两个元素中删除前面提到的 class：

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );

Answer 4

我正在使用这个 jquery 命令：

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );

Answer 5

toggleDrawer 现在是一个 public 函数，因为 @be54f78.

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

v1.0.6 当前不可用，因此您需要从源代码构建（截至今天）。

Answer 6

这样做：

HTML

<div class="mdl-layout__drawer" id="mobile-left-menu">
    <span class="mdl-layout-title">Whatever</span>
    <nav class="mdl-navigation inject-navigation">
          <a class="mdl-navigation__link" href="#" page="home">Home</a>
          <a class="mdl-navigation__link" href="#About" page="about">About</a>
    </nav>
</div>

JS

    $('.mdl-navigation__link').on('click', function () {

        // close the drawer the button is clicked
        $('.mdl-layout__drawer').toggleClass('is-visible')
    });

CSS

/* prevent the dark transparent background over the page with the drawer is open */
.mdl-layout__obfuscator.is-visible{
    background-color: transparent;
}

Answer 7

基于 GitHub discourse，我有几个可行的解决方案来解决单击 link 时关闭 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 以及 targeted 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");

以及 .39ms 中带有 if 语句运行的那个。如果没有 if 语句，它们都运行 in .19ms。但我也没有测量 getElementsByClassName 和 querySelector 方法，如果我理解正确的话，它们运行会影响页面加载。

当我运行 console.time("first"); 和 console.timeEnd("first"); 通过第一个对我来说最漂亮的代码时，时间是 23ms.

好像是ie8，我要支持，doesn't support getElementsByClassName。

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

这是 CodePen（不是我的）。

Answer 8

在 Material Design Lite Framework 中自动隐藏导航抽屉。

只需将此代码包含在您网页的脚本标记中

必须包含 jQuery 才能得到这个运行...:D

<script>
$(document).ready(function(){
    $(".mdl-layout__drawer a").click(function(){
        $(".mdl-layout__drawer,.mdl-layout__obfuscator").toggleClass("is-visible");
    });
});
</script>

Answer 9

要关闭它，您需要先检查它是否打开，因为没有 "closeDrawer"。当您不能假设它已经打开时，这很有用，例如您在抽屉内、抽屉外或某些会话超时功能中都有注销按钮。您只需关闭它即可显示重新登录表单。

closeDrawer() {
    let drawer = document.querySelector('.mdl-layout__drawer');
    if (drawer && drawer.className.indexOf("is-visible")>-1) {
        toggleDrawer();
    }
}
toggleDrawer() {
    let layout = document.querySelector('.mdl-layout');
    if (layout && layout.MaterialLayout) {
        layout.MaterialLayout.toggleDrawer();
    }
}

Answer 10

在 Angular ^4.0.0 中，如果您在 MaterialLayout 像我一样未定义。

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();

Answer 11

我不知道如何在我的 Angular 6 项目中获取 "MaterialLayout"，但我使用了他们的原型函数并在我的组件中使用了它：

  toggleDrawer = function () {
    var is_drawer_open = 'is-visible'
    var drawerButton = document.querySelector('.mdl-layout__drawer-button');
    var drawer_ = document.querySelector('.mdl-layout__drawer');
    var obfuscator_ = document.querySelector('.mdl-layout__obfuscator');
    drawer_.classList.toggle(is_drawer_open);
    obfuscator_.classList.toggle(is_drawer_open);
    // Set accessibility properties.
    if (drawer_.classList.contains(is_drawer_open)) {
      drawer_.setAttribute('aria-hidden', 'false');
      drawerButton.setAttribute('aria-expanded', 'true');
    } else {
      drawer_.setAttribute('aria-hidden', 'true');
      drawerButton.setAttribute('aria-expanded', 'false');
    }
  };

Answer 12

将此代码添加到自定义按钮 'click' 事件（在版本 1.3.0 上测试）

$(".mdl-layout__drawer, .mdl-layout__obfuscator").toggleClass("is-visible");

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

How to hide drawer upon user click

javascript

material-design

material-design-lite

更新