jQuery mmenu插件:滑动子菜单无法工作

Question

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

这是我的导航：

<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();
     });

菜单的打开和关闭与动画一起工作。但是，“优先”项的子菜单不起作用。

看看这段视频就可以证明：

​

​

更新：

<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

如果希望列表项完全链接到子菜单，只需将A替换为SPAN即可。这样，插件就能理解你的目标是什么，并为你做剩下的事情，你也不必隐藏A.mm-subopen。我想这能解决你的问题。