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

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:

  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 2

I'm using this jquery command:

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

Answer 3

Do this:

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 4

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() {
    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 5

add this code to a custom button 'click' event (tested on version 1.3.0)

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

Answer 6

toggleDrawer is now a public function since @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).