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

【问题标题】：jQuery mmenu plugin: Sliding Submenus won't workjQuery mmenu 插件：滑动子菜单不起作用
【发布时间】：2015-11-10 10:47:31
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： jquery mmenu

【解决方案1】：

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

【讨论】：