Question

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

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

Answer 1

我必须绑定到输入的click事件，停止传播，然后专注于它：

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

<强> jsFiddle example

Answer 2

我认为您必须超出在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();
  });


 });

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

2 个答案: