如何处理 Material Design Light mdl-menu 中的事件

Question

我正在使用 Material Design Light，没有任何其他框架，例如 Angular 或 android。只是普通的旧 PHP、Jquery、MDL min css 和 js。简单菜单

<button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
    <i class="material-icons">language</i>
</button>
<ul id="lang-switcher-items" class="mdl-menu mdl-js-menu mdl-menu--top-left" for="lang-switcher">
    <li class="mdl-menu__item">EN English</li>
    <li class="mdl-menu__item">RU Русский</li>
    <li class="mdl-menu__item">UK Українська</li>
    <li class="mdl-menu__item">PL Polski</li>         
</ul>

菜单项点击必须运行js函数类似setLanguage(language)

如何为 "mdl-menu__item" 点击创建监听器？我应该为每个 li 使用 Jquery .click(function()) 还是使用 mdl-menu 像 select 元素的任何其他方式？

Answer 1

使用jquery的点击事件并与class绑定。还为您的 li 元素定义一个 ID，以便您可以了解单击了哪个元素。看下面的例子

$(".mdl-menu__item").click(function(){
   var id = $(this).attr("id");
   alert(id+"was clicked");
})

为了演示我创建了一个 jsfiddle

如何处理 Material Design Light mdl-menu 中的事件

How to handle events in Material Design Light mdl-menu

php

jquery

html

material-design-lite