【问题标题】:jQuery mmenu v7.0.0 open submenu on menu openjQuery mmenu v7.0.0 open submenu on menu open
【发布时间】:2018-02-06 12:46:01
【问题描述】:

我对新版本的 jQuery mmenu 有疑问。我已经看到了适用于旧版本 mmenu 的解决方案,但不适用于这个解决方案,而且我在文档中也找不到任何内容。

我有一个普通菜单(设备宽度大于 1024 像素):

<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 添加和删除几个类,但我想知道是否没有更简单的方法来做到这一点,就像在之前的版本中你只需将一个类添加到列表元素并且它工作?我无法想象他们会从如此简单的事情变成相当复杂的事情......

任何帮助、指针甚至是我显然找不到的文档部分的链接都将受到高度赞赏。谢谢

编辑

我刚刚意识到 mmenu nav 在克隆时不会从普通子菜单中克隆列表项上的行为类。也许这就是这里的问题......或者这甚至可能是一个错误?

【问题讨论】:

    标签: jquery mmenu


    【解决方案1】:

    好的...我忘记了配置中的某些内容(我在documentation tutorial...中找到了)

    我不得不更改 mmenu 的初始化配置:

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

    【讨论】:

      猜你喜欢
      • 2018-10-03
      • 1970-01-01
      • 1970-01-01
      • 2021-05-29
      • 2018-06-05
      • 2022-12-28
      • 2018-07-24
      • 2022-11-20
      • 1970-01-01
      相关资源
      最近更新 更多