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

How to hide drawer upon user click

提问by krato

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.

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

采纳答案by jdepypere

I believe you can remove the is-visibleclass 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-visibleclass from the drawer.

我相信您可以is-visible从.mdl-layout__drawer. 我尝试从他们的网站修改 codepen 示例：demo。我的纯 javascript 事件绑定很生疏，但正如我所提到的，您只需.is-visible要从抽屉中删除该类。

Update

更新

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

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

回答by Benjamin

toggleDraweris now a public function since @be54f78.

toggleDrawer自@be54f78以来，现在是一个公共函数 。

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

Not currently available with v1.0.6, so you will need to build from source (as of today).

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

回答by MikeiLL

Based on GitHub discourse, I have a couple of working solutions to the (hopefully soon to be resolved) issue of having a MDL drawer close when link is clicked. At the moment I'm using:

基于GitHub discourse，我有几个可行的解决方案来解决点击链接时关闭 MDL 抽屉的问题（希望很快得到解决）。目前我正在使用：

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

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

Other variations are:

其他变体是：

1.

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.

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');

Someone in the discussion mentioned the idea of targeting the querySelectorso as not to require looking through the entire document and I came up with the following two variations:

讨论中有人提到了将目标定位querySelector为不需要查看整个文档的想法，我想出了以下两种变体：

3.

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.

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');

In both of my versions the browser has to run document.getElementsByClassNameas well as a targetedquerySelectorcall.

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

In my first version there is also the check: classList.contains('is-visible')which someone had recommended, but which seems unnecessary as, the function is being called from an item that is only visible if classList.contains('is-visible')is true.

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

I added the following calls to each of my variations (#3 and 4), withinthe functions:

添加以下调用我的每一个变化（＃3和4）的，内的功能：

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

And the one with the ifstatement runs in .39ms. Without the ifstatement they both run in .19ms. But I'm also not measuring the getElementsByClassNameand querySelectormethods that, if I understand correctly, are running on page load.

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

When I ran console.time("first");and console.timeEnd("first");through the first, and to me, prettiest code, the time was 23ms.

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

Apparently ie8, which I want to support, doesn't support getElementsByClassName.

显然，我想要支持的 ie8不支持 getElementsByClassName。

I'm hoping someone can provide and explain an optimalsolution to this relatively simple problem.

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

Here's a CodePen(not mine).

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

回答by idleherb

For version 1.0.6, you have to remove the before mentioned class from two elements:

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

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

回答by user5738952

I'm using this jquery command:

我正在使用这个 jquery 命令：

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

回答by Yan Foto

Showing and hiding the menu is as easy as adding and removing the .is-visibleclass as it can be seen in the source:

显示和隐藏菜单就像添加和删除.is-visible类一样简单，就像在源代码中看到的那样：

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

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

So you would have something like this:

所以你会有这样的事情：

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

I was hoping for a more convenient method of the MaterialLayoutwidget, but the best that I came up with was:

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

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

although this happens to be working, that _at the end of the method name shows that this function is not supposed to be (mis)used as a public API method.

尽管这恰好有效，但_在方法名称的末尾表明该函数不应（误）用作公共 API 方法。

回答by Chandra Shekhar

Auto Hide the Navigation Drawer in Material Design Lite Framework.

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

Just include this code in the script tag of your web page

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

Must Include jQuery to get this run... :D

必须包含 jQuery 才能运行...：D

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

回答by Stephen

To close it you need to check that it is open first, as there is no "closeDrawer". This is helpful when you cannot assume it is already open, like if you have a logout button within the drawer, and also outside, or in some session timeout function. You just need it closed to show the log-back-in form.

要关闭它，您需要先检查它是否已打开，因为没有“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();
    }
}

回答by AndreaM16

In Angular ^4.0.0you can use this workaround instead of using toggleDrawer()if you are having some problems with having MaterialLayoutundefined as I'm.

在 Angular ^4.0.0 中，toggleDrawer()如果您MaterialLayout像我一样遇到未定义的问题，您可以使用此解决方法而不是使用。

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

回答by Stef

I have no idea how to get the "MaterialLayout" inside my Angular 6 project, but I took their prototype function and used it in my component:

我不知道如何在我的 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');
    }
  };