How to hide drawer upon user click

Question

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

        

        
                      

              相关标签:
       
      

Answer 1

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

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 MaterialLayout widget, but the best that I came up with was:

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.

Answer 2

Auto Hide the Navigation Drawer in Material Design Lite Framework.

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

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

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

Answer 3

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:

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

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

Other variations are:

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

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

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

In both of my versions the browser has to run document.getElementsByClassName as well as a targeted querySelector call.

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.

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

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

And the one with the if statement runs in .39ms. Without the if statement they both run in .19ms. But I'm also not measuring the getElementsByClassName and querySelector methods that, if I understand correctly, are running on page load.

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

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

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

Here's a CodePen (not mine).

Answer 4

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

Update

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

Answer 5

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

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

Answer 6

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

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