如何使用javascript觸發一個mdl菜單？

有人可以幫助我如何執行一個MDDL菜單（材料設計精簡版）使用JavaScript？我沒有找到解釋如何在他的網站上做到這一點。如何使用javascript觸發一個mdl菜單？

HTML代碼

<!-- Left aligned menu below button --> 
<button id="demo-menu-lower-left" 
     class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
    for="demo-menu-lower-left"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul>

屏幕截圖： enter image description here

來源

2016-11-16 Bar O Kurniawan

網址說明了如何在這裏實現：https：//getmdl.io/components/#menus-section – hackerrdave

@hackerrdave yap ..但是沒有javascript解釋 –

只要你通過''（或其他方式），只要您使用正確的類，您將獲得菜單功能。 – hackerrdave

您可以使用下面的命令來重新初始化菜單： componentHandler.upgradeDom('MaterialMenu', 'mdl-menu');

按照source code這樣的：「搜索現有的DOM爲我們的組件類型的元素和升級他們，如果他們還沒有被升級。「

來源

2016-11-16 03:17:20 hackerrdave

其工作非常好。謝謝：） –

一個簡單的方法是將觸發就可以了 'click' 事件（嘗試在this page JavaScript控制檯下面的代碼）：

// the button of 3 vertical dots 
var button = document.querySelector('#demo-menu-lower-left'); 

// create a "click" event and dispatch it to button 
var ev = new Event('click'); 
button.dispatchEvent(ev);

或者，我們還可以使用瀏覽器的開發者工具inspector找到bu的事件處理程序tton，並從中吸取教訓。

來源

2016-11-16 02:03:29 Jokester

嗯..但我的情況是，我需要重新註冊MaterialMenu，因爲我使用html5歷史API製作了一個網頁，所以頁腳是靜態的。當主容器由ajax加載時，事件處理程序需要重新註冊。 –

如何使用javascript觸發一個mdl菜單？

回答

相關問題