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>

有谁知道怎么做？

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

如何挂钩进入MMenu事件？

1 个答案: