jQuery UI子菜单中的输入字段不起作用

Input field inside jQuery UI submenu not working

本文关键字：输入 字段 不起作用 UI 菜单 jQuery      更新时间：2023-09-26

我有这个例子：http://jsfiddle.net/VPXjs/137/

HTML:

<ul id="menu" style="width: 150px;">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li>
<a href="#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
<li><a href="#">quick search <input type='text' name='foobox' size='5' /></a></li>
</ul>
</li>
</ul>

jQuery:

$(function() {
    $( "#menu" ).menu();
});

当我按下输入字段时，如何使子菜单不关闭？此外，输入字段似乎被禁用了，因为如果我做得足够快，我甚至无法打字。

我必须绑定到输入的点击事件，停止传播，然后用关注它

$('input').click(function (e) {
    e.stopPropagation();
    $(this).focus();
})

jsFiddle示例

我认为您必须超出在jquery UI菜单中单击LI/a的默认操作。如果没有，你可以将焦点设置为悬停时的输入，如下所示：

http://jsfiddle.net/VPXjs/142/

<ul id="menu" style="width: 150px;">
  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
  <li><a href="#">Ada</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li>
    <a href="#">Delphi</a>
    <ul>
      <li class="ui-state-disabled"><a href="#">Ada</a></li>
      <li><a href="#">Saarland</a></li>
      <li><a href="#">Salzburg</a></li>
      <li><a class="quickSearch" href="#">quick search <input class="fooboxInput" type='text' name='foobox' size='5' /></a></li>
    </ul>
  </li>
</ul>

  $(function() {
$( "#menu" ).menu();
  $(".quickSearch").hover(function(){
    $(".fooboxInput").focus();
  });

 });
相关文章：