14

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

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

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

4

12 回答 12

23

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

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

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

于 2016-01-11T22:34:39.173 回答
10

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

更新

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

于 2015-07-21T13:41:48.217 回答
7

基于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不支持 getElementsByClassName。

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

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

于 2016-06-04T02:04:31.617 回答
4

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

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );
于 2015-11-09T11:24:40.037 回答
3

我正在使用这个 jquery 命令：

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );
于 2016-01-02T19:56:31.623 回答
0

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

$(".mdl-layout__drawer, .mdl-layout__obfuscator").toggleClass("is-visible");
于 2020-10-30T16:02:07.640 回答
0

我不知道如何在我的 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');
    }
  };
于 2018-06-10T17:33:28.837 回答
0

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

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 方法。

于 2015-07-21T21:48:23.650 回答
0

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

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();
于 2017-10-19T10:09:15.257 回答
0

要关闭它，您需要先检查它是否打开，因为没有“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();
    }
}
于 2017-06-16T19:10:32.090 回答
0

做这个：

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;
}
于 2016-04-30T22:49:03.770 回答
0

在 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>
于 2016-08-15T02:57:06.067 回答