Materialize CSS sidenav在移动设备上不可单击，但可在桌面浏览器上使用

Question

对CSS进行材质化Sidenav在桌面浏览器上运行：单击侧边栏将显示。但是，当我在移动浏览器上对其进行测试时，会显示菜单图标，但是当单击它时，它不会打开侧栏。 html / css源代码如下：

<nav class="white">
  <div class="nav-wrapper" >
    <a href="/" class="brand-logo center">
        <img src="/images/brand.png" width="150"/>
    </a>
    <a data-target="slide-out" class="sidenav-trigger">
        <i class="large material-icons cyan-text text-darken-4">menu</i>
    </a>
    <ul id="slide-out" class="sidenav">
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li>
                        <a class="collapsible-header">Login<i class="material-icons right">arrow_drop_down</i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="/users/login">Employer</a></li>
                                <li><a href="/users/login">Job Seeker</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
    </ul>
 </div>

而js初始化源是

 $('.sidenav').sidenav();

谢谢

enter image description here

Answer 1

尝试将zIndex = 1转换为sidenav和nav类

Answer 2

尝试从文档中复制代码并根据需要进行修改。