Question

我已经将html写成以下代码行

<input id="<code generated id>" type="text" value="select"/>
<div id="<code generated id>" class="popup">
    <ul id="<code generated id>" class="none">
       <li><input type="checkbox" value="A"/></li>
       <li><input type="checkbox" value="B"/></li>
       <li><input type="checkbox" value="C"/></li>
    </ul>
</div>

和风格

 .none
 {
   display:none;
 }

我已经将jQuery编写为下面的代码行，以使ul标签可见

 $(document).ready(function () {
       $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focus', function () {
          //  alert("<%= chkList.ClientID %>");
          $(".popup-checkbox ul").css({"display":"none"});
          $('#<%= chkList.ClientID %>').css({"display":"block" });
      });
  });

当我像下面那样写焦点时

$(document).ready(function () {
      $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focusout', function () {
          $(".popup-checkbox ul").css({ "display": "none" });
      });
});

它可以按要求运行，但问题是我无法选中复选框。

Answer 1

你正在寻找这样的东西吗？为简单起见，我给HTML元素提供了一些虚拟ID和类。

$(document).ready(function () {
       $('#mytextbox').bind('focus', function () {
          //  alert("<%= chkList.ClientID %>");
          $(".popup-checkbox ul").css({"display":"none"});
          $('#checkboxul').css({"display":"block" });
      });
  
  $('#mytextbox').bind('focusout', function () {
        setTimeout(function(){
          if(!$("#checkboxul input[type=checkbox]").is(":focus"))
            $(".popup-checkbox ul").css({ "display": "none" });
          },200);
      });

  
  
  });

.none
 {
   display:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mytextbox" type="text" value="select"/>
<div id="mypopupdiv" class="popup-checkbox">
    <ul id="checkboxul" class="none">
       <li><input type="checkbox" value="A"/></li>
       <li><input type="checkbox" value="B"/></li>
       <li><input type="checkbox" value="C"/></li>
    </ul>
</div>

如何正确处理文本框上的焦点？

1 个答案: