javascript - 如何更新/重新启动 mmenu？

Question

我试过使用 jQuery.mmenu-plugin，可以在这里找到 http://mmenu.frebsite.nl/ .它适用于预定义的列表，但我如何处理使用 jQuery 更新的列表？

这是初始化菜单的示例:

<nav id="menu" class="mm-menu mm-horizontal mm-ismenu mm-hasheader mm-hassearch mm-current mm-opened">
    <div class="mm-panel mm-opened mm-current" id="mm-m1-p0">               
       <ul id="list" class="mm-list">
            <li id="1"><a>item 1</a></li>
            <li id="2"><a>item 2</a></li>
            <li id="3"><a>item 3</a></li>
        </ul>
    </div>
</nav>

然后我通过以下方式将项目附加到列表中:

$("#list").append('<li id="4"><a>"item 4"</a></li>');

附加的(第四个)li-item 将不会获得与初始化 mmenu 之前定义的 li-items 相同的行为。这意味着在初始化之后添加的项目将不适用于搜索字段，例如。

有没有办法重新启动 mmenu 或更新与其关联的 li-items？

Answer 1

简要浏览插件的 ( mmenu.js) 代码后，您可以更改 JavaScript 以监听新的 <a[href="#id"']> 的 DOM|元素:

调整:

  click( $('a[href="#' + id + '"]', that.$menu), function( e ) {
       $opening.trigger( evt );
  }

到:

  click( $(document).find('a[href="#' + id + '"]', that.$menu ), function( e ) {
       $opening.trigger( evt );
  }

这将确保 $menu可用于任何已加载和未加载的 DOM 元素。

或者，您可以重新初始化它:

var $Mmenu = $('#menu'),
    $Container = $Mmenu.parent(),
    $List  = $('#menu #list');

    $List.append('<li id="4"><a>"item 4"</a></li>');

var newHtml = $Mmenu.html();

    $Mmenu.remove();
    $Container.append( newHtml );
    $(document).find('#menu').mmenu();