Comment masquer le tiroir lorsque l'utilisateur clique sur un élément? Ou quand un bouton est cliqué?

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

Comment faire pour que lorsque l'on clique sur le bouton, le tiroir soit caché comme si j'avais cliqué à l'extérieur du tiroir? J'ai essayé de simuler un événement de clic à l'extérieur du tiroir, mais il ne se cache toujours pas.

14
krato 21 juil. 2015 à 13:25

11 réponses

Meilleure réponse

Je pense que vous pouvez supprimer la classe is-visible de .mdl-layout__drawer. J'ai essayé de modifier un exemple de codepen à partir de leur site: démo. Ma liaison d'événement javascript pur est rouillée, mais comme je l'ai mentionné, il vous suffit de supprimer la classe .is-visible du tiroir.

Mise à jour

Le code que j'ai fourni était pour v1.0.0 de mdl et n'est plus réel. À partir de v1.1.0, une API publique est fournie pour basculer le tiroir, comme décrit dans la réponse de Benjamin . Si vous êtes entre v1.0.6 et v1.1.0, consultez la réponse de idleherb.

9
Community 23 mai 2017 à 12:25

J'utilise cette commande jquery:

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );
3
user5738952 2 janv. 2016 à 19:56

L'affichage et le masquage du menu sont aussi simples que l'ajout et la suppression de la classe .is-visible comme on peut le voir dans la source:

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

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

Vous auriez donc quelque chose comme ceci:

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

J'espérais une méthode plus pratique du widget MaterialLayout, mais le meilleur que j'ai trouvé était:

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

Bien que cela fonctionne, cela _ à la fin du nom de la méthode montre que cette fonction n'est pas censée être (mal) utilisée comme méthode API publique.

0
Yan Foto 21 juil. 2015 à 21:48

toggleDrawer est désormais une fonction publique depuis @ be54f78.

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

Non disponible actuellement avec la v1.0.6, vous devrez donc construire à partir des sources (à partir d'aujourd'hui).

24
Benjamin 11 janv. 2016 à 22:34

Faites ceci:

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;
}
0
Mahmoud Zalt 30 avril 2016 à 22:49

Dans Angular ^ 4.0.0 , vous pouvez utiliser cette solution de contournement au lieu d'utiliser toggleDrawer() si vous rencontrez des problèmes lorsque MaterialLayout n'est pas défini comme je le suis.

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();
0
AndreaM16 19 oct. 2017 à 10:30

Masquer automatiquement le tiroir de navigation dans Material Design Lite Framework.

Il suffit d'inclure ce code dans la balise de script de votre page Web

Doit inclure jQuery pour obtenir cette exécution ...: D

<script>
$(document).ready(function(){
    $(".mdl-layout__drawer a").click(function(){
        $(".mdl-layout__drawer,.mdl-layout__obfuscator").toggleClass("is-visible");
    });
});
</script>
0
Chandra Shekhar 15 août 2016 à 02:57

Je ne sais pas comment obtenir le "MaterialLayout" dans mon projet Angular 6, mais j'ai pris leur fonction de prototype et je l'ai utilisée dans mon composant:

  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');
    }
  };
0
Stef 10 juin 2018 à 17:33

Sur la base du discours GitHub, j'ai quelques solutions de travail pour le ( si tout va bien bientôt être résolu) problème d'avoir un tiroir MDL fermé lorsque le lien est cliqué. En ce moment j'utilise:

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

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

D'autres variantes sont:

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

Quelqu'un dans la discussion a mentionné l'idée de cibler le querySelector afin de ne pas exiger de parcourir tout le document et j'ai proposé les deux variantes suivantes:

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

Dans mes deux versions, le navigateur doit exécuter document.getElementsByClassName ainsi qu'un appel ciblé querySelector.

Dans ma première version, il y a aussi la vérification: classList.contains('is-visible') que quelqu'un avait recommandée, mais qui semble inutile car, la fonction est appelée à partir d'un élément qui n'est visible que si classList.contains('is-visible') est vrai.

J'ai ajouté les appels suivants à chacune de mes variantes (# 3 et 4), dans les fonctions:

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

Et celui avec l'instruction if s'exécute dans .39ms. Sans l'instruction if, ils s'exécutent tous les deux en .19ms. Mais je ne mesure pas non plus les méthodes getElementsByClassName et querySelector qui, si je comprends bien, s'exécutent au chargement de la page.

Lorsque j'ai parcouru console.time("first"); et console.timeEnd("first"); le premier, et pour moi, le plus joli code, le temps était 23ms.

Apparemment, ie8, que je souhaite soutenir, ne prend pas en charge getElementsByClassName.

J'espère que quelqu'un pourra fournir et expliquer une solution optimale à ce problème relativement simple.

Voici un CodePen (pas le mien).

7
MikeiLL 4 juin 2016 à 02:04

Pour la version 1.0.6, vous devez supprimer la classe susmentionnée de deux éléments:

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );
4
idleherb 8 févr. 2016 à 17:37

Pour le fermer, vous devez d'abord vérifier qu'il est ouvert, car il n'y a pas de "closeDrawer". Cela est utile lorsque vous ne pouvez pas supposer qu'il est déjà ouvert, comme si vous avez un bouton de déconnexion dans le tiroir, et également à l'extérieur, ou dans une fonction d'expiration de session. Il vous suffit de le fermer pour afficher le formulaire de connexion.

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();
    }
}
0
Stephen 16 juin 2017 à 19:10