web-dev-qa-db-ja.com

ユーザークリックで引き出しを隠す方法

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

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

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

javascriptmaterial-designmaterial-design-lite
15
krato

is-visibleから.mdl-layout__drawerクラスを削除できると思います。私は彼らのサイトからcodepenの例を変更してみました： demo 。私の純粋なjavascriptイベントバインディングはさびていますが、前述したように、ドロワーから.is-visibleクラスを削除する必要があります。

更新

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

9
jdepypere

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

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

現在v1.0.6では使用できないため、ソースからビルドする必要があります（現在）。

24
Benjamin

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.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_とtargetedquerySelector呼び出しを実行する必要があります。

私の最初のバージョンには、誰かが推奨したclassList.contains('is-visible')のチェックもありますが、classList.contains('is-visible')がtrueの場合にのみ表示されるアイテムから関数が呼び出されているため、これは不要です。

私のバリエーション（＃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 （私のものではありません）です。

7
MikeiLL

バージョン1.0.6の場合、前述のクラスを2つの要素から削除する必要があります。

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

私はこのjqueryコマンドを使用しています：

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

Angular 6プロジェクト内で「MaterialLayout」を取得する方法がわかりませんが、プロトタイプ関数を使用してコンポーネントで使用しました。

  toggleDrawer = function () {
    var is_drawer_open = 'is-visible'
    var drawerButton = document.querySelector('.mdl-layout__drawer-button');
    var drawer_ = document.querySelector('.mdl-layout__drawer');
    var obfuscator_ = document.querySelector('.mdl-layout__obfuscator');
    drawer_.classList.toggle(is_drawer_open);
    obfuscator_.classList.toggle(is_drawer_open);
    // Set accessibility properties.
    if (drawer_.classList.contains(is_drawer_open)) {
      drawer_.setAttribute('aria-hidden', 'false');
      drawerButton.setAttribute('aria-expanded', 'true');
    } else {
      drawer_.setAttribute('aria-hidden', 'true');
      drawerButton.setAttribute('aria-expanded', 'false');
    }
  };
0
Stef

これを行う：

[〜＃〜] 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;
}
0
Mahmoud Zalt

Material Design LiteFrameworkでナビゲーションドロワーを自動非表示にします。

このコードをWebページのスクリプトタグに含めるだけです

この実行を行うにはjQueryを含める必要があります...：D

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

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

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

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

メニューの表示と非表示は、.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メソッドとして（誤って）使用されることを想定していないことを示しています。

0
Yan Foto