如何以编程方式单击“mdl-layout--fixed-header”菜单按钮答案

【问题标题】：How to Click "mdl-layout--fixed-header" Menu Button Programatically如何以编程方式单击“mdl-layout--fixed-header”菜单按钮
【发布时间】：2015-12-18 20:53:10
【问题描述】：

我有一个按钮，我想打开 mdl-layout__drawer。例如，查看official example here 并注意菜单图标会在单击时打开抽屉。

我有一个按钮，点击后，我希望抽屉打开。我已经使用 jQuery.click() 方法尝试了下面的两个 jQuery 选择器。两者都不起作用 - 只有屏幕闪烁。有什么想法吗？

$(".mdl-layout__drawer-button").click();
$(".material-icons:contains('menu')").click();

【问题讨论】：

您是否有机会在问题可见的地方分享一个代码笔？有很多事情可能会出错，所以如果没有更多代码可以判断。
Codepen here 嗯，...嗯，它适用于 Codepen！嗯...
在这种情况下，加载 jQuery 可能会出现问题。可悲的是，我不是那里的专家，所以如果没有失败的例子，我认为我无法提供进一步的帮助：-/

标签： material-design-lite

【解决方案1】：

确保您的代码在 $(document).on('pageinit') 内，并且您使用正确的选择器来检测按钮点击，如下例所示：

$(document).on('pageinit', function() {
        $("#idOfTheButton").click(function() {
            $(".mdl-layout__drawer-button").click();
    }); 
});

【讨论】：

【解决方案2】：

无需点击菜单按钮，使用材质 API 切换 sidenav 可见性 document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

【讨论】：