Comment cacher le tiroir à l'aide du clic de l'utilisateur

Je crois que vous pouvez supprimer la classe is-visible de .mdl-layout__drawer . J'ai essayé de modifier un exemple Codepen de leur site: demo . Ma liaison purement javascript est rouillée, mais comme je l'ai mentionné, il vous suffit de supprimer la classe .is-visible du tiroir.

Mettre à 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 il existe une API publique 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 , regardez la réponse de idleherb .

toggleDrawer est maintenant une fonction publique depuis @ be54f78 .

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

Actuellement indisponible avec v1.0.6, vous devrez donc créer à partir de la source (dès aujourd'hui).

Basé sur le discours de GitHub , j'ai quelques solutions de travail pour résoudre le problème (j'espère que je serai bientôt résolu) 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); 

Les autres variantes sont les suivantes:

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 la recherche de l'intégralité du document et je suis venu avec 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 les deux versions, le navigateur doit exécuter document.getElementsByClassName ainsi qu'un appel ciblé d' querySelector .

Dans ma première version, il y a également la vérification: classList.contains('is-visible') que quelqu'un a recommandé, mais qui semble inutile puisque 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 suivantes:

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

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

Quand j'ai couru console.time("first"); Et console.timeEnd("first"); À travers le premier, et pour moi, le code le plus joli, le temps était de 23ms .

Apparemment ie8, que je veux supporter, ne supporte pas getElementsByClassName .

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

Voici un CodePen (pas le mien).

J'utilise cette commande jquery:

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

Pour la version 1.0.6, vous devez supprimer la classe précédemment mentionnée à partir de deux éléments:

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

Montrer et cacher le menu est aussi simple que d'ajouter et de supprimer la classe .is-visible telle qu'elle se voit dans la source :

 MaterialLayout.prototype.drawerToggleHandler_ = function() { 'use strict'; this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN); }; 

Donc, vous auriez quelque chose comme ça:

 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, que _ à la fin du nom de la méthode montre que cette fonction n'est pas censée être (mal) utilisée comme méthode public API.

Faire cela:

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

Cacher automatiquement le tiroir de navigation dans la conception de matériaux Lite Framework.

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

Doit inclure jQuery pour exécuter cette exécution …: D

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

Pour le fermer, vous devez vérifier qu'il est ouvert en premier, car il n'y a pas de "CloseDrawer". Ceci est utile lorsque vous ne pouvez pas supposer qu'il est déjà ouvert, comme si vous disposiez d'un bouton de déconnexion dans le tiroir, et également à l'extérieur, ou dans une fonction de temporisation de session. Vous avez juste besoin de fermer pour afficher le formulaire de retour de session.

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