如何挂钩 MMenu 事件？

Question

我已经成功地为 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.

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