Как скрыть ящик при нажатии пользователем

Ответ 1

Я считаю, что вы можете удалить класс is-visible из .mdl-layout__drawer. Я попытался изменить пример кодаза с их сайта: демонстрация. Мое чистое привязку к событиям javascript является ржавым, но, как я уже упоминал, вам просто нужно удалить класс .is-visible из ящика.

Update

Код, который я предоставил, был для v1.0.0 mdl и больше не действителен. Начиная с v1.1.0 существует открытый API, предназначенный для переключения ящика, как описано в ответе Бенджамина. Если вы находитесь между v1.0.6 и v1.1.0, посмотрите idleherb answer.

Ответ 2

toggleDrawer теперь является публичной функцией, поскольку @be54f78.

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

В настоящее время нет версии v1.0.6, поэтому вам нужно будет создать исходный код (на сегодняшний день).

Ответ 3

Основываясь на дискурсе GitHub, у меня есть несколько рабочих решений для (можно надеяться, вскоре будет разрешено) вопрос о закрытии ящика MDL при нажатии ссылки. На данный момент я использую:

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

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

Другие варианты:

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

Кто-то в обсуждении упомянул идею ориентации на querySelector, чтобы не требовать просмотра всего документа, и я придумал следующие два варианта:

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

В обеих моих версиях браузер должен запускать document.getElementsByClassName, а также целевой вызов querySelector.

В моей первой версии есть также проверка: classList.contains('is-visible'), которую кто-то рекомендовал, но которая кажется ненужной, поскольку функция вызывается из элемента, который отображается только в том случае, если classList.contains('is-visible') является истинным.

Я добавил следующие вызовы для каждого из моих вариантов (# 3 и 4) в пределах функций:

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

И тот, у кого оператор if работает в .39ms. Без оператора if они работают в .19ms. Но я также не измеряю методы getElementsByClassName и querySelector, которые, если я правильно понимаю, работают на загрузке страницы.

Когда я запустил console.time("first"); и console.timeEnd("first"); через первый, а для меня - самый красивый код, время было 23ms.

По-видимому, ie8, который я хочу поддержать, не поддерживает getElementsByClassName.

Я надеюсь, что кто-то сможет предоставить и объяснить оптимальное решение этой относительно простой проблемы.

Здесь CodePen (не мой).

Ответ 4

Для версии 1.0.6 вам нужно удалить предыдущий класс из двух элементов:

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

Ответ 5

Я использую эту команду jquery:

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

Ответ 6

Отображение и скрытие меню так же просто, как добавление и удаление класса .is-visible, как можно видеть в источнике:

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

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

Итак, у вас будет что-то вроде этого:

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

Я надеялся на более удобный метод виджета MaterialLayout, но лучшее, что я придумал, было:

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

хотя это работает, что _ в конце имени метода показывает, что эта функция не должна быть (неверно) использована как общедоступный API-метод.

Ответ 7

Сделайте это:

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

Ответ 8

Авто Скрыть ящик навигации в материальном дизайне Lite Framework.

Просто включите этот код в тег script вашей веб-страницы

Должен включать jQuery для запуска этого запуска...: D

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

Ответ 9

Чтобы закрыть его, вам нужно проверить, что он открыт первым, так как нет "closeDrawer". Это полезно, если вы не можете предположить, что он уже открыт, например, если в ящике есть кнопка выхода из системы, а также снаружи или в некоторой функции тайм-аута сеанса. Вам просто нужно закрыть его, чтобы отобразить форму входа в систему.

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

Ответ 10

В Angular ^ 4.0.0 вы можете использовать это обходное решение вместо использования toggleDrawer(), если у вас возникли проблемы с наличием MaterialLayout undefined, как я.

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();