Egg reference and javascript

kalyn

The switch on the anchor link only works once. After that, the menu is closed once without a transition. If js is removed, the crossings are fine, but there's an open menu.

$('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">
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Открытие
                            &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Пленарное заседание
                          &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Брейн Фитнес
                          &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Обучение игровым кейсам и практикам
                          &lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell mdl-cell--8-col-phone mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
          День 2
        &lt;/div&gt;
        &lt;ul class="demo-list-icon mdl-list"&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Практикум в школах региона по отработке игр
                            &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Обучение игровым кейсам и практикам
                          &lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell--2-offset-desktop  mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
          День 3
        &lt;/div&gt;
        &lt;ul class="demo-list-icon mdl-list"&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Практикум в школах региона по отработке игр
                            &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Тренинги по выстраиванию образовательных и карьерных траекторий
                          &lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
          День 4
        &lt;/div&gt;
        &lt;ul class="demo-list-icon mdl-list"&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Подведение итогов
                            &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Оформление договоров на аттестацию робототехников
                          &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Подписание соглашений
                          &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Торжественное закрытие форума
                          &lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="mdl-list__item"&gt;
            &lt;i class="material-icons"&gt;done&lt;/i&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                            Культурная программа
                          &lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mdl-grid"&gt;
      &lt;div id='tasks' class="mdl-layout-title" id='tasks' style="margin: auto; color: black;"&gt;&lt;b&gt;Наши задачи:&lt;/b&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mdl-grid"&gt;
      &lt;div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div class="left-top"&gt;1&lt;/div&gt;
        &lt;div class="text"&gt;Подготовка 10 -15 новых профориентационных игр и использование игр из «Атласа новых профессий»&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div class="left-top"&gt;2&lt;/div&gt;
        &lt;div class="text"&gt;Обучение педагогов и активистов, работающих с РДШ 3 компетенциям:
          &lt;br&gt;-проведение тренинговых и активных образовательных форм работы;
          &lt;br&gt;-проведение конкретных кейсов деловых игр и отработка на фокус-группах;
          &lt;br&gt;- принципы создание собственных деловых игр;
          &lt;br&gt;- обучение работе с атласом новых профессий.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div class="left-top"&gt;3&lt;/div&gt;
        &lt;div class="text"&gt;
          Формирование профессионального сообщества игротехников, создание собственных кейсов игр
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div class="left-top"&gt;4&lt;/div&gt;
        &lt;div class="text"&gt;
          Проведение чемпионата игротехников, запуск профессионального движения игротехников в образовании
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mdl-grid"&gt;
      &lt;div id='extratasks' class="mdl-layout-title" style="margin: auto; color: black;"&gt;&lt;b&gt;Сверхзадача:&lt;/b&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mdl-grid"&gt;
      &lt;div style='margin: auto' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp"&gt;
        &lt;div id="canvas"&gt;
          &lt;p class="task first left"&gt;Включение РДШ в работу с Атласом Новых Профессий (фактически привнести атлас в каждую школу)&lt;/p&gt;
          &lt;p style="margin-top: 60px" class="task second right"&gt;Создание интерактивной формы образования (в перспективе могут осуществлять сами школьники по принципу старшие-младшим)&lt;/p&gt;
          &lt;p style="margin-top: 60px" class="task third left"&gt;Формирование в школах и педагогической среде повестки НТИ&lt;/p&gt;
          &lt;p style="margin-top: 40px" class="task fourth right"&gt;Создание готовой программы ежедневной работы для актива РДШ в регионах&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer class="mdl-mega-footer"&gt;
    &lt;div class="mdl-mega-footer__middle-section"&gt;

      &lt;div class="mdl-mega-footer__drop-down-section"&gt;
        &lt;input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked&gt;
        &lt;h1 class="mdl-mega-footer__heading"&gt;Партнёры&lt;/h1&gt;
        &lt;ul class="mdl-mega-footer__link-list"&gt;
          &lt;li&gt;&lt;a href="http://www.ranepa.ru/"&gt;РАНХиГС&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://alterschool.com"&gt;Школа Будущих Президентов&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="https://asi.ru"&gt;Агенство Стратегических Инициатив&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="https://www.oprf.ru/"&gt;Общественная палата РФ&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://kremlin.ru/"&gt;Администрация Президента РФ&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://xn----ctbbfgafpccvblxfoe7o3c.xn--p1ai/"&gt;Российское движение школьников&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mdl-mega-footer__bottom-section"&gt;
      &lt;div class="mdl-logo"&gt;Школа Будущих Президентов&lt;/div&gt;
      &lt;ul class="mdl-mega-footer__link-list"&gt;
        &lt;li&gt;&lt;a href="#"&gt;О нас &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Контакты&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

  &lt;/footer&gt;
&lt;/main&gt;

</div>

</body>

derk

If onclick='s every element of the menu, window.location="index.php#main"; var layout = document.querySelector(".mdl-layout");layout.MaterialLayout.toggleDrawer(); return false; Everything will work.

Egg reference and javascript

Suggested Topics

How to activate 24 hours on Datapicker Bootstrap?
Software Programming • javascript bootstrap 3 datepic languageker • • baileigh

Event onkeyup to match between words
Software Programming • javascript jquery ajax • • esther

JavaScript - .map()
Software Programming • javascript • • jonetta

How to make reference references to catalogues with the ln team?
Software Programming • linux • • Laycee

How to make a <button> to translate <p> How many times do you want?</p></button>
Software Programming • javascript html • • Kadir

HTML and JavaScript
Software Programming • html css • • courtlanda

JavaScript
Software Programming • javascript • • Bogopo

Preliminary examination of user input into textarea
Software Programming • javascript jquery • • Trenton

Width of slider blocks in slade (JS, Jquery)
Software Programming • javascript html jquery cs • • nishika

I cannot modify the width of a div with JS
Software Programming • javascript • • esther

Get dimensions with javascript of an image established from javascript in a div?
Software Programming • javascript • • Rossere

While in JavaScript
Software Programming • javascript while • • Duquan

PHP! How to check the reference to the condition. Check whether the reference is made
Software Programming • php html web programming • • kalena

JSF and JavaScript
Software Programming • javascript java primefac languagees xhtml jboss • • Bogopo

Replacement of jQuery
Software Programming • javascript html jquery cs • • Jolied

Egg reference and javascript

Suggested Topics

How to activate 24 hours on Datapicker Bootstrap? Software Programming • javascript bootstrap 3 datepic languageker • • baileigh

Event onkeyup to match between words Software Programming • javascript jquery ajax • • esther

JavaScript - .map() Software Programming • javascript • • jonetta

How to make reference references to catalogues with the ln team? Software Programming • linux • • Laycee

How to make a <button> to translate <p> How many times do you want?</p></button> Software Programming • javascript html • • Kadir

HTML and JavaScript Software Programming • html css • • courtlanda

JavaScript Software Programming • javascript • • Bogopo

Preliminary examination of user input into textarea Software Programming • javascript jquery • • Trenton

Width of slider blocks in slade (JS, Jquery) Software Programming • javascript html jquery cs • • nishika

I cannot modify the width of a div with JS Software Programming • javascript • • esther

Get dimensions with javascript of an image established from javascript in a div? Software Programming • javascript • • Rossere

While in JavaScript Software Programming • javascript while • • Duquan

PHP! How to check the reference to the condition. Check whether the reference is made Software Programming • php html web programming • • kalena

JSF and JavaScript Software Programming • javascript java primefac languagees xhtml jboss • • Bogopo

Replacement of jQuery Software Programming • javascript html jquery cs • • Jolied

How to activate 24 hours on Datapicker Bootstrap?
Software Programming • javascript bootstrap 3 datepic languageker • • baileigh

Event onkeyup to match between words
Software Programming • javascript jquery ajax • • esther

JavaScript - .map()
Software Programming • javascript • • jonetta

How to make reference references to catalogues with the ln team?
Software Programming • linux • • Laycee

How to make a <button> to translate <p> How many times do you want?</p></button>
Software Programming • javascript html • • Kadir

HTML and JavaScript
Software Programming • html css • • courtlanda

JavaScript
Software Programming • javascript • • Bogopo

Preliminary examination of user input into textarea
Software Programming • javascript jquery • • Trenton

Width of slider blocks in slade (JS, Jquery)
Software Programming • javascript html jquery cs • • nishika

I cannot modify the width of a div with JS
Software Programming • javascript • • esther

Get dimensions with javascript of an image established from javascript in a div?
Software Programming • javascript • • Rossere

While in JavaScript
Software Programming • javascript while • • Duquan

PHP! How to check the reference to the condition. Check whether the reference is made
Software Programming • php html web programming • • kalena

JSF and JavaScript
Software Programming • javascript java primefac languagees xhtml jboss • • Bogopo

Replacement of jQuery
Software Programming • javascript html jquery cs • • Jolied