javascript - 侧边导航不适用于基于 Material 设计的移动应用程序

Question

我写了一个带有侧边导航功能的简单页面。但是，单击左上角时侧导航无法打开。我的代码:
HTML:

<nav>
            <ul class="right hide-on-med-and-down">
                <li><a href="#!">First Sidebar Link</a></li>
                <li><a href="#!">Second Sidebar Link</a></li>
            </ul>
            <ul id="slide-out" class="side-nav">
                <li><a href="#!">First Sidebar Link</a></li>
                <li><a href="#!">Second Sidebar Link</a></li>
            </ul>
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
        </nav>


        <div class="row">
            <div class="card logincard">
                <form class="col s12">
                    <h5>Enter your mail id to reset your password: </h5>
                  <div class="row">
                    <div class="input-field col s12">
                      <input id="mail" type="email" class="validate">
                      <label for="mail">Mail</label>
                    </div>
                  </div>
                  <div class="row">
                    <a class="waves-effect waves-light btn" style="background: #4099FF;">Submit</a>
                  </div>
                </form>
            </div>
        </div>  

JS:

(function($){
          $(function(){

            $('.button-collapse').sideNav();

          }); // end of document ready
        })(jQuery); // end of jQuery name space   

JSFiddle 链接是:https://jsfiddle.net/0hq4g3f1/
我该如何解决？

Answer 1

您需要将您的图标(或其他东西)放在 left UL 类中

<nav>
  <ul class="left show-on-med-and-down">
    <li><a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a></li>
  </ul>
  <!-- etc -->