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

更新

我提供的代码是针对mdl的v1.0.0而不再是实际代码。 从v1.1.0开始，提供了一个用于切换抽屉的公共API，如Benjamin's answer 中所述。如果您在v1.0.6和v1.1.0之间，请查看idleherb's answer。

Answer 3

基于GitHub discourse，我有一些工作解决方案（希望很快得到解决）在点击链接时关闭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，我想支持，doesn't support getElementsByClassName。

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

这是一个CodePen（不是我的）。

Answer 4

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

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

Answer 5

我正在使用这个jquery命令：

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

Answer 6

显示和隐藏菜单就像添加和删除.is-visible类一样简单，因为可以看到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_();

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

Answer 7

这样做：

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

要关闭它，您需要先检查它是否已打开，因为没有＆＃34; closeDrawer＆＃34;。当你不能认为它已经打开时，这很有用，比如你在抽屉里面有一个注销按钮，也在外面，或者在一些会话超时功能中。您只需将其关闭即可显示登录状态。

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 中，如果您遇到toggleDrawer()未定义的问题，则可以使用此解决方法而不是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

将此代码添加到自定义按钮“单击”事件（在1.3.0版上测试）

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

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

12 个答案:

更新