php - 如何处理 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 的任何其他方式，如 选择元素？

Answer 1

使用jquery的click事件并绑定(bind)类。还为您的 li 元素定义一个 ID，这样您就可以知道点击了哪个元素。看下面的例子

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

为了演示我创建了一个 jsfiddle