14

ユーザーがアイテムをクリックしたときにドロワーを非表示にするにはどうすればよいですか? それともボタンがクリックされたときですか？

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

ボタンをクリックすると、引き出しの外側をクリックしたかのように引き出しが非表示になるようにするにはどうすればよいですか? ドロワーの外でクリック イベントをシミュレートしようとしましたが、それでも非表示になりません。

4

12 に答える 12

23

toggleDrawer@be54f78以来、パブリック関数になり ました。

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

現在 v1.0.6 では利用できないため、ソースからビルドする必要があります (現時点では)。

于 2016-01-11T22:34:39.173 に答える
10

is-visibleからクラスを削除できると思います.mdl-layout__drawer。彼らのサイトから codepen の例を変更してみました: demo。.is-visible私の純粋な JavaScript イベント バインディングは錆びていますが、前述したように、引き出しからクラスを削除するだけで済みます。

アップデート

私が提供したコードv1.0.0は mdl 用であり、もはや実際のものではありません。Benjamin's answerでv1.1.0説明されているように、ドロワーを切り替えるためのパブリック API が提供されています。v1.0.6と の間にいる場合はv1.1.0、idleherb の回答をご覧ください。

于 2015-07-21T13:41:48.217 に答える
7

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ドキュメント全体に目を通す必要がないように をターゲットにするというアイデアに言及し、次の 2 つのバリエーションを思いつきました。

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')。誰かが推奨していましたが、 true の場合にのみ表示されるアイテムから関数が呼び出されているため、これは不要に思えclassList.contains('is-visible')ます。

関数内で、各バリエーション (#3 と 4) に次の呼び出しを追加しました。

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

そして、ifステートメントを持つものはで実行され.39msます。ifステートメントがなければ、両方とも で実行され.19msます。しかし、私が正しく理解している場合、ページの読み込み時に実行されているgetElementsByClassNameandメソッドも測定していません。querySelector

私が最初の、そして私にとって最も美しいコードを実行したとき、その時間console.time("first");は.console.timeEnd("first");23ms

どうやらサポートしたいie8はgetElementsByClassName をサポートしていないようです。

この比較的単純な問題に対する最適な解決策を誰かが提供して説明できることを願っています。

これがCodePenです（私のものではありません）。

于 2016-06-04T02:04:31.617 に答える
0

これを行う：

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;
}
于 2016-04-30T22:49:03.770 に答える
0

メニューの表示と非表示は、ソース.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 メソッドとして (誤) 使用されるべきではないことを示しています。

于 2015-07-21T21:48:23.650 に答える
0

このコードをカスタム ボタンの「クリック」イベントに追加します (バージョン 1.3.0 でテスト済み)。

$(".mdl-layout__drawer, .mdl-layout__obfuscator").toggleClass("is-visible");
于 2020-10-30T16:02:07.640 に答える
0

Angular ^4.0.0では、私のように未定義toggleDrawer()の問題がある場合は、使用する代わりにこの回避策を使用できます。MaterialLayout

(
  document
    .querySelector('.mdl-layout__obfuscator') as HTMLDivElement
).click();
于 2017-10-19T10:09:15.257 に答える