javascript - 使用“X”图标关闭实现sidenav

我已将sidenav设置为覆盖屏幕宽度的100％的样式，并且需要在右上角添加标准的“ X”图标以关闭导航。这也是一个WordPress主题，所以也有。有什么建议吗？

<nav class="transparent z-depth-0">
  <div class="nav-wrapper">
    <a href="<?php echo get_option('home'); ?>" class="brand-logo center-align"></a>

    <a href="#" data-activates="mobile-demo" class="right button-collapse" style="color: white;"><i class="material-icons">menu</i></a>

    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'right hide-on-med-and-down')); ?>


    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>


  </div>

</nav>

编辑：所以这是关闭sidenav onclick的函数

 // if closeOnClick, then add close event for all a tags in side sideNav
    if (options.closeOnClick === true) {
      menu_id.on("click.itemclick", "a:not(.collapsible-header)",      function(){
        removeMenu();
      });
    }

基本上，如果单击关闭设置为true（如最小设置），则在单击导航中的任何链接时，sidenav将关闭。基于此，看来我需要添加此链接：

<a href="#"  class="right" style= "color: white;"><i class="material-icons">clear</i></a>

进入此数组（上面代码中与sidenav有关的第二个数组：

<?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>

我已经尝试过了，但到目前为止没有成功。

最佳答案

只需添加带有sidenav-close类的菜单项

例：

<li>
   <a href="#!" class="sidenav-close">Close </a>
</li>

关于javascript - 使用“X”图标关闭实现sidenav，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38387513/