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

打开和关闭菜单适用于动画。然而，项目＆＃34; FIRST＆＃34;的子菜单不起作用

观看此视频演示：

更新：

<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。我认为这样可以解决您的问题。

jQuery mmenu插件：Sliding Submenus赢了工作

1 个答案: