除非我刷新页面，否则 Mmenu 不会打开菜单答案

【问题标题】：Mmenu does not open menu unless I refresh the page除非我刷新页面，否则 Mmenu 不会打开菜单
【发布时间】：2019-12-28 02:59:11
【问题描述】：

我正在 silverstripe 中构建网页，并尝试使用 Mmenu.js 添加移动菜单。出于某种原因，如果我单击菜单打开器，在我刷新页面之前菜单将不起作用。 url 会立即更新，但不会发生其他任何事情。

我试过用谷歌搜索，但到目前为止我发现的每一个建议都没有奏效。

目前我使用的是 8.2.3 版本，因为当我尝试最新版本时，在运行我的 mmenu_init.js 脚本时会收到错误“Mmenu is undefined”。

这是我页面的总体布局：

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.2.3/mmenu.css" integrity="sha256-XULUJ0ERBgEKrcR3CENdFRfSwMKwMJn3KuD9MjuAoVg=" crossorigin="anonymous" />
  </head>
  <body>
    <div id="page_container">
      <header>
        <a id="hamburger" class="mobile_only" href="/new_site/test/public/#mobile_nav">Open menu</a>
        <nav id="mobile_nav">
      <ul>
        <li class="active">
          <a href="/new_site/test/public/" title="Home">Home</a>
          <li >
        <a href="/new_site/test/public/about/" title="About">About</a>
        <ul>
          <li >
            <a href="/new_site/test/public/about/mission/" title="Mission">Mission</a>
          </li>
          <li >
            <a href="/new_site/test/public/about/history/" title="History">History</a>
          </li>
        </ul>
          </li>
          <li >
        <a href="/new_site/test/public/newsletters/" title="Newsletters">Newsletters</a>
        <ul>
          <li >
            <a href="/new_site/test/public/newsletters/recent/" title="Recent">Recent</a>
          </li>
          <li >
            <a href="/new_site/test/public/newsletters/archives/" title="Archives">Archives</a>
          </li>
        </ul>
          </li>
          <li >
        <a href="/new_site/test/public/events/" title="Events">Events</a>
        <ul>
          <li >
            <a href="/new_site/test/public/events/past/" title="Past">Past</a>
          </li>
          <li >
            <a href="/new_site/test/public/events/announcements/" title="Announcements">Announcements</a>
          </li>
        </ul>
          </li>
          <li >
        <a href="/new_site/test/public/resources/" title="Resources">Resources</a>  
        <ul>      
          <li >
            <a href="/new_site/test/public/resources/policy/" title="Policy">Policy</a>
          </li>   
          <li >
            <a href="/new_site/test/public/resources/books/" title="Books">Books</a>
          </li>   
          <li >
            <a href="/new_site/test/public/resources/other-books/" title="Other Books">Other Books</a>
          </li>   
          <li >
            <a href="/new_site/test/public/resources/links/" title="Links">Links</a>
          </li>   
        </ul>
          </li>      
      </ul>
    </nav>
      </header>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.2.3/mmenu.js" integrity="sha256-eSVpPcpo6qwKHLSpc7SWDKDG3TjMNxlFzbtfcJIJQjI=" crossorigin="anonymous"></script>
    <script src="mmenu_init.js"></script>
  </body>
</html>

这里是mmenu_init.js：

Mmenu.configs.classNames.selected = "active";
Mmenu.configs.offCanvas.page.selector = "#page_container";

document.addEventListener(
    "DOMContentLoaded", () => {
        window.menu = new Mmenu( "#mobile_nav", {
            extensions: ["theme-dark"]
        });
    }
);

【问题讨论】：

标签： javascript html silverstripe mmenu

【解决方案1】：

原来是 silverstripe 重写 ajax 请求的问题（请参阅https://docs.silverstripe.org/en/4/developer_guides/templates/how_tos/disable_anchor_links/）。

为了解决这个问题，我将此添加到我的app/_config/app.yml：

SilverStripe\View\SSViewer:
  rewrite_hash_links: false

【讨论】：