MaterializeCSS - 如何关闭移动菜单答案

【问题标题】：MaterializeCSS - How to close the mobile menuMaterializeCSS - 如何关闭移动菜单
【发布时间】：2015-09-24 17:08:57
【问题描述】：

我使用框架 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>

【问题讨论】：

我找到了解决方案：$("#nav-mobile li").click(function() { $('.button-collapse').sideNav('hide'); });
可能想将其添加为答案。它实际上记录在here。

标签： jquery materialize

【解决方案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
  }
);

【讨论】：

【解决方案2】：

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

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

将.sidenav-close 类添加到sidenav 内的元素和任何该元素上的单击事件将导致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>

【讨论】：

【解决方案3】：

不用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>

【讨论】：

你好，Globefire。请考虑添加更多信息，因为如果链接过时，此答案不会增加任何价值。
嘿，@TiagoMartinsPeres 感谢您的指导。我将确保在我未来的所有答案中都这样做

【解决方案4】：

记录在案的解决方案对我也不起作用。我不得不求助于一些“黑客”。以下是我的做法。

我使用id="side-nav-clear" 在侧导航中添加了一个按钮，单击该按钮时我触发了对sidenav-overlay 的单击，这是用户通常隐藏侧导航的方式。这对我来说按预期工作。

$("#side-nav-clear").on("click", function() {
    $("#sidenav-overlay").trigger("click");
    return false;
});

【讨论】：

好一个！谢谢