点击信息框显示

我已经搜索了3个小时，找不到解决方案。所有即时消息都是当你点击一个表单中的输入字段时，一侧的信息框会显示出来。我试图搞乱jQuery，只是无法让它工作，即使我确定代码是正确的（我们不是总是哈哈）。点击信息框显示

无论如何，ID欣赏任何解决方案。

我在的jQuery/CSS/HTML的尝试看起来像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<style> 
    .infoBubble { 
     visibility:hidden; 
     color:#000; 
    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $('.box').click(function() { 
     $('.infoBubble').css({'visibility':'visible'}); 
    }); 
</script> 
</head> 
<body> 

    <form action="process.php" method="get"> 

      <div class="row"> 
       <span class="label">Description: </span> 
       <input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span> 
      </div> 

     </form> 

</body> 
</html>

来源

2011-06-30 user29660

尝试以下操作：

$('.box').click(function(){ 
    $('.infoBubble').toggle(); 
});

顺便说。隐藏/显示某物的css属性不是visibility，而是display。例如：

display: none;

或

display: block;

来源

2011-06-30 11:52:20

知名度是有效的。 'visibility：hidden'隐藏一个元素，但不会将其从文档流中移除。 'display：none'隐藏一个元素并将其从页面流中移除。 http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone –

当属性仍然在页面占用相同的间距和位置，但不可见时使用visibilty。显示完全删除它。 – user29660

首先，文件加载完毕之前，这意味着输入字段不存在正在执行你的JavaScript。将您的代码附加到jQuery的ready事件中，以防止发生这种情况。

$(function() { 
    $('.box').click(function() { 
     $('.infoBubble').css({'visibility':'visible'}); 
    }); 
}

其次，隐藏visiblity: hidden的元素仍然占用布局空间。通常你会使用display: none使它看起来好像该元素根本就不存在。无论哪种方式，您都可以使用show方法使元素可见。

CSS：

.infoBubble { 
    color: #000; 
    display: none; 
}

的JavaScript：

$('.infoBubble').show();

第三，有可能是你的用户集中在输入不点击它（例如，通过压片）！通过使用focus事件而不是click，您可以不管显示消息。

$('.box').focus(function() { 
    $('.infoBubble').show() 
});

除上述外，你还可以使用blur事件隐藏信息，当用户不再集中于输入（当他们点击其他地方，或跳格出来的）。一起你最终得到这样的事情：

$(function() { 
    $('.box').focus(function() { 
     $('.infoBubble').show(); 
    }).blur(function() { 
     $('.infoBubble').hide(); 
    }); 
}

来源

2011-06-30 11:54:47

准备事件的代码是？基于你的答案，我发现这个，它的工作，谢谢你的答复。 $（document）.ready（function（）{ – user29660

@ user29660：'$（function（）{'是'$（document）.ready（function（）{'的简写版本。 –

点击信息框显示

回答

相关问题