如何更新/重新启动菜单？

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-item 相同的行为。这意味着初始化后添加的项目将无法与搜索字段一起使用，例如。

有没有办法重新启动菜单或更新与其连接的项目？

Answer 1

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

调整：

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

Answer 2

插件的实例附加到菜单上。计数器插件在插件上注册了一个更新函数，搜索插件使用该函数来影响其他插件的更改。例如当您在搜索框中输入内容时，它将修剪子菜单的可见子项并更新计数器。

要连接到这里，您需要附加到菜单元素的插件实例（因为有一个包含已注册更新函数的数组）

所以，如果你有这样的元素：

<nav id="menu"></nav>

您通过以下方式初始化的：

$("#menu").mmenu();

然后在插件对象上调用_update()方法：

$("#menu").data('mmenu')._update();
    'menu' is the id of my menu element
    'mmenu' is the name of the plugin
    _update() is the magic function that will call all the update functions registered in the updates array