如何挂钩 MMenu 事件？

Posted 2023-05-08

【中文标题】如何挂钩 MMenu 事件？

【英文标题】：How to hook into MMenu event?

【发布时间】：2015-06-05 10:49:38

【问题描述】：

我已经成功地为 MMenu jquery 插件添加了一个搜索工具。它工作得很好，除了一件事：当搜索文本框出现时，我想将焦点设置为它。到目前为止，我已经通过向文本框的父级添加一个“onmouseover”事件处理程序来实现这一点，该文本框是当前可见的表示“页面”的“ul”。它有点工作但很笨拙，因为用户需要将光标移动到指定区域。在移动设备上，我怀疑它根本无法工作

我正在寻找一种方法来连接 MMenu 的事件处理程序，该处理程序会打开搜索文本框所在的页面。这是我正在处理的 html 代码示例：

<nav id="menu" class="mm-menu mm-horizontal mm-offcanvas mm-current mm-opened">
<ul id="mm-0" class="mm-list mm-panel mm-opened mm-subopened">
<ul id="mm-1" class="mm-list mm-panel mm-highest mm-current mm-opened">
<li class="mm-subtitle">
      Search for:  
<input id="search" type="text" onkeyup="HandleSearchInput(this);" size="20">
<br>
<div id="searchResults" style="margin:10px 10px 0 20px">
</ul>
<ul id="mm-2" class="mm-list mm-panel mm-hidden">
<ul id="mm-3" class="mm-list mm-panel mm-hidden">
<ul id="mm-4" class="mm-list mm-panel mm-hidden">
<ul id="mm-5" class="mm-list mm-panel mm-hidden">
<ul id="mm-6" class="mm-list mm-panel mm-hidden">
<ul id="mm-7" class="mm-list mm-panel mm-hidden">
<ul id="mm-8" class="mm-list mm-panel mm-hidden">
<ul id="mm-9" class="mm-list mm-panel mm-hidden">
<ul id="mm-10" class="mm-list mm-panel mm-hidden">
<ul id="mm-11" class="mm-list mm-panel mm-hidden">
<ul id="mm-12" class="mm-list mm-panel mm-hidden">
<ul id="mm-13" class="mm-list mm-panel mm-hidden">
<ul id="mm-14" class="mm-list mm-panel mm-hidden">
</nav>

有人知道怎么做吗？

罗伯特·W.

【参考方案1】：

根据新的mmenu 版本并使用its off-canvas hooks，您可以实现此目的。 HTML

<nav id="menu">
    <ul>            
        <li><input type="text" id="search" placeholder="Search..."></li>
    </ul>
</nav>

JS

document.addEventListener(
    "DOMContentLoaded", () => 
        new Mmenu( "#menu",
            hooks:
                open:finish: () => 
                    $('#search').focus();
                
            
        );
    
);