Navigating the anchor link only works once. After this, the menu just closes once without a transition (talking about the mobile version). If js removed, then the transitions go fine, but the menu remains open.
$('a.small').click(function() { var layout = document.querySelector('.mdl-layout'); layout.MaterialLayout.toggleDrawer(); }); <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_green-orange.min.css" /> <link rel="stylesheet" href="style.css" /> <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <div class="mdl-layout-title"> <img style="height: 50px" src="LOGO-SD.png"> </div> <span class="mdl-layout-spacer"></span> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="#main">Главная</a> <a class="mdl-navigation__link" href="#timetable">Расписание</a> <a class="mdl-navigation__link" href="#tasks">Задачи</a> <a class="mdl-navigation__link" href="#extratasks">Сверхзадачи</a> <a class="mdl-navigation__link" href="">Контакты</a> <a class="mdl-navigation__link" href="">Регистрация</a> </nav> </div> </header> <div class="mdl-layout__drawer mdl-layout--small-screen-only"> <span class="mdl-layout-title" style="color: black;">Игронет</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link small" href="#main">Главная</a> <a class="mdl-navigation__link small" href="#timetable">Расписание</a> <a class="mdl-navigation__link small" href="#tasks">Задачи</a> <a class="mdl-navigation__link small" href="#extratasks">Сверхзадачи</a> <a class="mdl-navigation__link small" href="">Контакты</a> <a class="mdl-navigation__link small" href="">Регистрация</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"> <div class="mdl-grid"> <div id='main' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp" style="margin: auto;"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text"> «ПРОФЕССИИ БУДУЩЕГО» </h2> </div> <div class="mdl-card__supporting-text"> <p><b> ОБРАЗОВАТЕЛЬНЫЕ ФОРУМЫ ДЛЯ ПОДГОТОВКИ ИГРОТЕХНИКОВ «ПРОФЕССИИ БУДУЩЕГО» РОССИЙСКОГО ДВИЖЕНИЯ ШКОЛЬНИКОВ </b> </p> <p>Наша главная задача не передать вам знания, наша задача побороть ваш страх перед незнанием, научить вас учиться.</p> <b>Участники:</b> <p>250-300 человек, педагоги, студенты, специалисты по работе с РДШ</p> <b>Фокус-группа:</b> <p>300-400 детей в каждом регионе</p> </div> <div class="mdl-card__media mdl-cell--middle"> <img src="air_professii.jpg"> </div> <div class="mdl-card__actions mdl-card--border"> <a style='color: white;' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Зарегистрироваться </a> </div> </div> </div> <div class="mdl-grid"> <div id='timetable' class="mdl-layout-title" style="margin: auto; color: black;"><b>Наше расписание:</b> </div> </div> <div class="mdl-grid mdl-cell--middle"> <div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> День 1 </div> <ul class="demo-list-icon mdl-list"> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Открытие </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Пленарное заседание </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Брейн Фитнес </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Обучение игровым кейсам и практикам </span> </li> </ul> </div> <div class="mdl-cell mdl-cell--8-col-phone mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> День 2 </div> <ul class="demo-list-icon mdl-list"> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Практикум в школах региона по отработке игр </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Обучение игровым кейсам и практикам </span> </li> </ul> </div> <div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> День 3 </div> <ul class="demo-list-icon mdl-list"> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Практикум в школах региона по отработке игр </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Тренинги по выстраиванию образовательных и карьерных траекторий </span> </li> </ul> </div> <div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> День 4 </div> <ul class="demo-list-icon mdl-list"> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Подведение итогов </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Оформление договоров на аттестацию робототехников </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Подписание соглашений </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Торжественное закрытие форума </span> </li> <li class="mdl-list__item"> <i class="material-icons">done</i> <span class="mdl-list__item-primary-content"> Культурная программа </span> </li> </ul> </div> </div> <div class="mdl-grid"> <div id='tasks' class="mdl-layout-title" id='tasks' style="margin: auto; color: black;"><b>Наши задачи:</b> </div> </div> <div class="mdl-grid"> <div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div class="left-top">1</div> <div class="text">Подготовка 10 -15 новых профориентационных игр и использование игр из «Атласа новых профессий»</div> </div> <div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div class="left-top">2</div> <div class="text">Обучение педагогов и активистов, работающих с РДШ 3 компетенциям: <br>-проведение тренинговых и активных образовательных форм работы; <br>-проведение конкретных кейсов деловых игр и отработка на фокус-группах; <br>- принципы создание собственных деловых игр; <br>- обучение работе с атласом новых профессий.</div> </div> <div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div class="left-top">3</div> <div class="text"> Формирование профессионального сообщества игротехников, создание собственных кейсов игр </div> </div> <div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"> <div class="left-top">4</div> <div class="text"> Проведение чемпионата игротехников, запуск профессионального движения игротехников в образовании </div> </div> </div> <div class="mdl-grid"> <div id='extratasks' class="mdl-layout-title" style="margin: auto; color: black;"><b>Сверхзадача:</b> </div> </div> <div class="mdl-grid"> <div style='margin: auto' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp"> <div id="canvas"> <p class="task first left">Включение РДШ в работу с Атласом Новых Профессий (фактически привнести атлас в каждую школу)</p> <p style="margin-top: 60px" class="task second right">Создание интерактивной формы образования (в перспективе могут осуществлять сами школьники по принципу старшие-младшим)</p> <p style="margin-top: 60px" class="task third left">Формирование в школах и педагогической среде повестки НТИ</p> <p style="margin-top: 40px" class="task fourth right">Создание готовой программы ежедневной работы для актива РДШ в регионах</p> </div> </div> </div> </div> <footer class="mdl-mega-footer"> <div class="mdl-mega-footer__middle-section"> <div class="mdl-mega-footer__drop-down-section"> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked> <h1 class="mdl-mega-footer__heading">Партнёры</h1> <ul class="mdl-mega-footer__link-list"> <li><a href="http://www.ranepa.ru/">РАНХиГС</a> </li> <li><a href="http://alterschool.com">Школа Будущих Президентов</a> </li> <li><a href="https://asi.ru">Агенство Стратегических Инициатив</a> </li> <li><a href="https://www.oprf.ru/">Общественная палата РФ</a> </li> <li><a href="http://kremlin.ru/">Администрация Президента РФ</a> </li> <li><a href="http://xn----ctbbfgafpccvblxfoe7o3c.xn--p1ai/">Российское движение школьников</a> </li> </ul> </div> </div> <div class="mdl-mega-footer__bottom-section"> <div class="mdl-logo">Школа Будущих Президентов</div> <ul class="mdl-mega-footer__link-list"> <li><a href="#">О нас </a> </li> <li><a href="#">Контакты</a> </li> </ul> </div> </footer> </main> </div> </body> 