Question

尝试在失去焦点或模糊后隐藏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/

任何人都知道如何隐藏模糊或鼠标？

Answer 1

 $('#myformid').on('blur', '.field_hints',function(){
     $(this).next('.tooltip_static').hide();
 }); //replace #myformid with the id of your form

Answer 2

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

例如，您可以执行this：

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

Answer 3

您可以使用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");
      });
});

Answer 4

首先，您有两个具有相同身份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);

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

在模糊或鼠标移开时隐藏div

4 个答案: