0

在失去焦点或模糊后试图隐藏 div。我有一个简单的表单，当通过触摸或点击（这是一个移动网站）关注该字段时，我为用户提供了一些指导。它可以正常工作，但我必须再次单击该字段才能使 div 再次隐藏。

HTML：

 <input type="text" id="usernameCL" name="usernameCL" placeholder="Create a Username" autocomplete="off" autocorrect="off" class="field_hints"/>
<div id="usernameCL" class="tooltip_static" style="display:none"> This be my field hint</div>

这是我的另一个领域提示

使用 1.6.4 JQ 的 JQuery 函数：

$().ready(function () {
    $('.field_hints').bind('focus',
     function()
     {
       var field = this.id;
       var div = $('.tooltip_static[id='+field+']');

       if(div.css('display') == 'none')
       {
         div.show(function()
         {
           div.slideUp("fast");
         });
       }
      else
      {
        div.hide('blur');
      }
    });
  });

这是一个小提琴：http: //jsfiddle.net/LapPA/

任何人都知道如何让它隐藏在模糊或鼠标之外？

4

4 回答 4

2 
 $('#myformid').on('blur', '.field_hints',function(){
     $(this).next('.tooltip_static').hide();
 }); //replace #myformid with the id of your form
于 2013-02-04T20:51:15.457 回答
1

您需要一个绑定到blur事件的单独处理程序。

例如，您可以这样做：

$().ready(function () {
  $('.field_hints').bind('focus',
    function()
    {
      var field = this.id;
      var div = $('.tooltip_static[id='+field+']');

      if(div.css('display') == 'none')
      {
        div.hide(function()
        {
          div.slideDown("fast");
        });
      }
    }).bind('blur', 
        function()
        {
            var field = this.id;
            var div = $('.tooltip_static[id='+field+']');
            div.hide();
        });
  });
于 2013-02-04T20:52:33.360 回答
1

您可以使用该mouseleave事件：http: //jsfiddle.net/4VUvD/

$().ready(function () {
      $('.field_hints').bind('focus', function() {
          var field = this.id;
          var div = $('.tooltip_static[id='+field+']');
          div.slideDown("fast");
      }).bind('mouseleave', function(){
          $('.tooltip_static[id='+this.id+']').slideUp("fast");
      });
});
于 2013-02-04T20:54:51.283 回答
0

首先，您有两个具有相同 id 的对象usernameCL。情况不妙。

您正在搜索的代码：

var func = function () {
    // We assume the id of the input tag to be #someid, and the tooltip div to be #someid_tooltip
    var id = $(this).attr('id');
    $('#' + id + '_tooltip').fadeOut();
};

$('#usernameCL').bind('blur', func);
$('#usernameCL').bind('mouseout', func);

可能是我搞砸了一个或两个名字。

于 2013-02-04T20:54:03.377 回答