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

Posted 2023-05-08

【中文标题】如何更新/重新启动菜单？

【英文标题】：How to update/reinitiate mmenu?

【发布时间】：2013-11-16 11:41:03

【问题描述】：

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

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

【问题讨论】：

id 不应该只是一个数字，甚至不能以数字开头。

上面的列表只是一个例子，我没有使用它。但是，是的，我什至不应该在其中添加任何 id。

【参考方案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();

【讨论】：

谢谢，但答案似乎不足以解决问题。添加的列表项仍然不会获得 mmenu 行为。单击附加项目不会将类设置为“mm-selected”。

已更新替代方案，我想您需要编辑更多插件代码才能使新添加的 DOM 元素正常工作。

@Gustav 另外，您需要编辑三个位置才能使第一个建议起作用，而不仅仅是一行。

我采用了类似于您的替代解决方案的方法。尽管删除和添加菜单并没有让我感觉很舒服，但它确实有效。谢谢！

我同意这不是最舒适的解决方案！也许向插件作者提交票证可能会构建一个更干净的新 dom 元素版本，或者我可能会在有机会时自己创建一个版本:-)

【参考方案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

【讨论】：

这工作正常，但尝试动态添加子菜单和更新时出现问题。我的子菜单列表更新得很好，但没有返回按钮/指向上一个父菜单的链接。我错过了什么@jkeane？