Question

我使用框架CSS Materialize，但我遇到了问题。点击链接后，如何关闭左侧移动菜单？默认情况下，只有在菜单外单击时菜单才会关闭。所以我尝试使用函数removeMenu（）但它不起作用。有人有解决方案吗？这是我的菜单：

<div class="navbar-fixed">
      <nav class="orange darken-4" role="navigation">
        <div class="nav-wrapper container">
          <a id="logo-container"  class="brand-logo"><img id="class" src="img/logo.png" class="nav_logo"></a>
          <ul class="right hide-on-med-and-down">
            <li><a>test</a></li>
            <li ><a>test2</a></li>
          </ul>

          <ul id="nav-mobile" class="side-nav">
            <li><a>test</a></li>
            <li><a>test2</a></li>
          </ul>
          <a href="#" data-activates="nav-mobile" class="button-collapse" id="burger_menu"><i class="material-icons">menu</i></a>
        </div>
      </nav>
    </div>

Answer 1

添加closeOnClick

// Initialize collapse button
$('.button-collapse').sideNav({
    menuWidth: 300, // Default is 240
    edge: 'left', // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  }
);

Answer 2

不需要jquery，不需要js函数。

参考this official documentation向下滚动至关闭触发器，使用.sidenav-close将为您完成工作。

万一链接过时，这对我有用。

<ul className="sidenav" id="mobile-links">
   <li className="sidenav-close">Home Page</li>
   <li className="sidenav-close">Dashboard</li>
   <li className="sidenav-close">About Us</li>
   <li className="sidenav-close">Contact Us</li>
   <li className="sidenav-close">Logout</li>
</ul>

Answer 3

记录在案的解决方案对我来说也不起作用。我不得不求助于一些“黑客攻击”。我就是这样做的。

我使用call() { echo $@ "$@" }向侧面导航添加了一个按钮，点击该按钮我触发了id="side-nav-clear"上的点击，这是用户通常隐藏侧面导航的方式。这对我来说是预期的。

sidenav-overlay

Answer 4

基于两个答案都使用jquery的事实，我决定添加一个仅使用sidenav元素的类来关闭导航元素的附加答案。

您可以在materializecss.com主页上找到sidenav文档。它指出：

将类.sidenav-close添加到sidenav内的元素以及任何该元素上的click事件将导致sidenav关闭。这是在页面不会在链接上刷新的单页应用程序中很有用点击。

文档中的用法：

<ul id="slide-out" class="sidenav">
    <li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

MaterialiseCSS - 如何关闭移动菜单

4 个答案: