jQuery mmenu 插件：滑动子菜单不起作用

Question

我正在使用 jquery mmenu 插件，但似乎无法使用滑动子菜单。

这是我的导航：

<nav id="menu">
  <ul class="mm-panel">
    <li>
      <a class="level1-nav" href="#mm-1" data-target="#mm-1">FIRST</a>
      <ul class="mm-panel" id="mm-1">
        <li><a class="level1-nav" href="#mm-1" data-target="#mm-1"><span>Back</span></a></li>
        <li>
          <a class="level2-nav">SUB 1 First</a>
          <ul class="mm-panel" id="mm-2">
            <li><a href="#">SUB 2 First</a></li>
            <li><a href="#">SUB 2 Second</a></li>
            <li><a href="#">SUB 2 Third</a></li>
          </ul>
        </li>
        <li><a href="#">SUB 1 Second</a></li>
        <li><a href="#">SUB 1 Third</a></li>
        <li><a href="#">SUB 1 Fourth</a></li>
      </ul>
    </li>
    <li><a href="#">SECOND</a> </li>
    <li><a href="#">THIRD</a> </li>
    <li><a href="#">FOURTH</a> </li>
  </ul>
  <a id="close-menu" href="#">Close</a>
</nav>

我想让常规的滑动子菜单起作用。然而它们根本不起作用。

     $(function() {
        $("#menu").mmenu({
            iconPanels  : {
                add         : true,
                visible     : 1
            },
            navbar      : {
                add         : false
            },
            classes     : "mm-light",
            counters    : false,
            searchfield : false,
            slidingSubmenus : true, 
            header      : {
                add     : true,
                update  : true,
                title   : false,
                titleLink : "none",
            },
            onClick: {
                close: false
            }
     })

     var API = $("#menu").data( "mmenu" );

     $("#close-menu").click(function() {
          API.close();
     });

菜单的打开和关闭使用动画。但是项目 "FIRST" 的子菜单不起作用

观看演示它的视频：

更新：

<nav id="menu">
  <ul class="mm-panel">
    <li>
      <span class="level1-nav" data-target="#mm-1">FIRST</span>
      <ul class="mm-panel" id="mm-1">
        <li><span class="level1-nav" data-target="#mm-1">Back</span></li>
        <li>
          <span class="level2-nav" data-target="#mm-2">SUB 1 First</span>
          <ul class="mm-panel" id="mm-2">
            <li><a href="#">SUB 2 First</a></li>
            <li><a href="#">SUB 2 Second</a></li>
            <li><a href="#">SUB 2 Third</a></li>
          </ul>
        </li>
        <li><span data-target="#">SUB 1 Second</span></li>
        <li><span data-target="#">SUB 1 Third</span></li>
        <li><span data-target="#">SUB 1 Fourth</span></li>
      </ul>
    </li>
    <li><span data-target="#">SECOND</span> </li>
    <li><span data-target="#">THIRD</span> </li>
    <li><span data-target="#">FOURTH</span> </li>
  </ul>
  <a id="close-menu" href="#">Close</a>
</nav>

Answer 1

如果您希望列表项完全 link 到子菜单，只需将 A 替换为 SPAN。这样插件就会了解您的目标并为您完成剩下的工作，您也不必隐藏 A.mm-subopen。我认为这会解决您的问题。

jQuery mmenu 插件：滑动子菜单不起作用

jQuery mmenu plugin: Sliding Submenus won't work

jquery

mmenu