Question

新版jQuery mmenu存在问题。我见过的解决方案适用于较旧版本的mmenu但不适用于此版本，我也无法在文档中找到任何内容。

我有一个普通菜单（设备宽度大于1024px）：

<nav id="menu">
  <ul class="nav-firstlvl">
    <li>
      <a href="/documentation/" title="Documentation">Documentation</a>
    </li>
    <li class="act">
      <a href="/module/" title="Module">Module</a>
      <ul class="nav-secondlvl">
        <li class="act">
          <a href="/module/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="/organisation/" title="Organisation">Organisation</a>
      <ul class="nav-secondlvl">
        <li>
          <a href="/organisation/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="/contact/" title="Contact">Contact</a>
    </li>
  </ul>
</nav>

由mmenu克隆：

var $menu = jQuery("#menu").mmenu({
               "extensions": [
                  "position-right"
               ]
            }, {
              clone:true
            }
          );

所有工作都很好。我的问题是，如果用户在子菜单的页面上（我的例子中的“子页面”页面）之一，我想在子菜单中打开菜单。我试图将类“mm-opened”添加到活动子菜单列表项的列表项中但没有任何反应。菜单在第一层打开。然后我意识到，与旧的mmenu版本相比，新版本的克隆菜单有不同的类和不同的结构：

<nav id="mm-menu" class="mm-menu mm-menu_offcanvas mm-menu_position-right" aria-hidden="true">
  <div class="mm-panels">
    <div id="mm-0" class="mm-panel mm-panel_has-navbar mm-panel_opened">
      <div class="mm-navbar">
        <a class="mm-navbar__title">Menu</a>
      </div>
      <ul class="nav-firstlvl mm-listview">
        <li class="mm-listitem">
          <a href="/documentation/" title="Documentation">Documentation</a>
        </li>
        <li class="act mm-listitem">
          <a class="mm-btn_next" href="#mm-1">
            <span class="mm-sronly">Open submenu (Module)</span>
          </a>
          <a href="/module/" title="Module">Module</a>
        </li>
        <li class="mm-listitem">
          <a class="mm-btn_next" href="#mm-2">
            <span class="mm-sronly">Open submenu (Organisation)</span>
          </a>
          <a href="/organisation/" title="Organisation">Organisation</a>
        </li>
        <li class="mm-listitem">
          <a href="/contact/" title="Contact">Contact</a>
        </li>
      </ul>
    </div>
    <div id="mm-1" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
      <div class="mm-navbar">
        <a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
          <span class="mm-sronly">Close submenu</span>
        </a>
        <a class="mm-navbar__title" href="#mm-0">Module</a>
      </div>
      <ul class="nav-secondlvl mm-listview">
        <li class="act mm-listitem">
          <a href="/module/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </div>
    <div id="mm-2" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
      <div class="mm-navbar">
        <a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
          <span class="mm-sronly">Close submenu</span>
        </a>
        <a class="mm-navbar__title" href="#mm-0">Organisation</a>
      </div>
      <ul class="nav-secondlvl mm-listview">
        <li class="mm-listitem">
          <a href="/organisation/subpage/" title="Subpage">Subpage</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

当然我可以通过jQuery添加和删除几个类但是我想知道是否有更简单的方法来执行它，就像之前你必须将一个类添加到list-element并且它工作的版本一样？我无法想象他们会从如此轻松的事情转变为相当复杂的事情......

任何帮助，指示甚至是指向我显然无法找到的文档部分的链接都将受到高度赞赏。感谢

修改

我刚刚意识到mmenu nav在克隆时不会从正常子菜单克隆list-item上的act-class。也许这就是问题......或者这甚至可能是一个错误？

Answer 1

好的......我忘记了配置中的一些内容（我在documentation tutorial ...中找到了...）

我不得不改变mmenu的初始化配置：

var $menu = jQuery("#menu").mmenu({
             "extensions": [
                "position-right"
             ]
          }, {
            clone:true,
            classNames: {  // This part was missing...
              selected: "act"
            }
          }
        );

打开菜单上的jQuery mmenu v7.0.0打开子菜单

1 个答案: