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

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

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

标题
添加

---

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

我相信您可以从

.mdl-layout\u抽屉中删除
可见的
类。我尝试从他们的站点修改codepen示例：。我的纯javascript事件绑定已经过时，但正如我所提到的，您只需要从抽屉中删除
.is visible
类

更新
我提供的代码是针对mdl的
v1.0.0
，不再是实际代码从
v1.1.0开始
提供了一个用于切换抽屉的公共API，如中所述。如果您在
v1.0.6
和
v1.1.0
之间，请看一看。
显示和隐藏菜单与添加和删除
一样简单。可以看到
类：

MaterialLayout.prototype.drawerToggleHandler=函数（）{
"严格使用",；
this.drawer\u.classList.toggle（this.CssClasses\u.IS\u drawer\u OPEN）；
};

所以你会有这样的想法：

功能切换\u抽屉（）{
var drawer=document.getElementsByClassName（'mdl-layout_uudrawer'）[0]；
drawer.classList.toggle（“可见”）；
}

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

var layout=document.getElementsByClassName（'mdl-layout'）[0]；
layout.MaterialLayout.DroperToggleHandler()；

虽然这正好起作用，但方法名称末尾的
表明此函数不应（mis）用作公共API方法。
对于1.0.6版，必须从两个元素中删除前面提到的类：

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

我正在使用以下jquery命令：

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

toggleDrawer
现在是一个公共函数

var-layout=document.querySelector（'.mdl-layout'）；
layout.MaterialLayout.toggleDrawer（）；

v1.0.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>

CSS

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

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

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

基于此，我有两个有效的解决方案（希望很快得到解决）当点击链接时关闭MDL抽屉的问题。目前我正在使用：

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

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

其他变化包括：

一,

二,

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

三,

四,

在我的两个版本中，浏览器都必须运行
document.getElementsByClassName
以及目标
querySelector
调用

在我的第一个版本中，还有一个复选框：
classList.contains（'is-visible'）
，这是有人推荐的，但似乎没有必要，因为该函数是从一个只有在
classList.contains（'is-visible'）为true时才可见的项调用的

我在函数中为我的每个变体（#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”）和
控制台时间结束（“第一”）通过第一个，对我来说是最漂亮的代码，时间是
23ms

显然是ie8，我想支持它

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

这是一个（不是我的）
 在Material Design Lite框架中自动隐藏导航抽屉

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

必须包含jQuery才能运行此操作…：D

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


$（文档）.ready（函数（）{
$（“.mdl-layout\u抽屉a”）。单击（函数（）{
$（“.mdl-layout\uuuu抽屉，.mdl-layout\uuuuu模糊器”）.toggleClass（“可见”）；
});
});
要关闭它，您需要先检查它是否打开，因为没有“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();
    }
}

在Angular^4.0.0中，如果您在使用未定义的
MaterialLayout
时遇到一些问题，可以使用此解决方法，而不是使用
toggleDrawer（）

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

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

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

请检查其他答案中的一个<代码>.mdl-layout\uuu模糊器
也需要删除。我认为这应该被接受answer@Mageshkhanna显然，自去年7月以来已经发生了很多变化，但我的代码示例显然有效，所以我不太明白为什么您需要对此进行否决。我的代码适用于1.0.0版，该版本在提出问题时处于活动状态。对不起，伙计！现在更新：）有人知道如何检查抽屉是否打开了吗。如果抽屉已经关闭，我不想触发toggleDrawer，因为它会打开它。@Lancelot我知道有点晚了，但我在下面的回答中已经提到了这一点。在1.1.3中，现在我得到了
MaterialLayout
未定义。有什么想法吗？这个有一个问题，它现在需要与按钮或键盘交互。对于“Material Kit-v1.1.1”。
<script>
$(document).ready(function(){
    $(".mdl-layout__drawer a").click(function(){
        $(".mdl-layout__drawer,.mdl-layout__obfuscator").toggleClass("is-visible");
    });
});
</script>

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();
    }
}

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

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

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