4

I've tried using the jQuery.mmenu-plugin, found here http://mmenu.frebsite.nl/. It works great with pre-defined lists, but how do I handle lists which are updated with jQuery?

Here's an example of an initialized mmenu:

<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>

Then I append items to the list the following way:

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

The appended (fourth) li-item won't get the same behavior as the li-items defined before initialize the mmenu. This means that items added after the initialization won't work with the search field, as an example.

Is there a way to reinitiate the mmenu or to update the li-items connected to it?

4

2 回答 2

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();
于 2013-11-05T15:14:30.370 回答
1

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

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

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

<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
于 2014-08-25T18:49:31.347 回答