Question

我现在已经搜索了3个小时，但无法找到解决方案。所有im后，当你点击表格中的输入字段时，旁边的信息框显示出来。我试着搞乱jQuery并且即使我确定代码是正确的也不能让它工作（不是我们总是大声笑）。

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

我对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>

Answer 1

首先，您的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();

第三，您的用户可能会在不点击输入的情况下对输入进行聚焦（例如，通过按Tab键）！通过使用focus事件代替click，您可以无论如何都显示消息。

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

除了上述内容之外，您还可以使用blur事件在用户不再关注输入时（当他们点击其他地方或从中跳出时）隐藏消息。总之，你最终得到这样的东西：

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

Answer 2

尝试以下方法：

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

顺便说一下。隐藏/显示内容的css属性不是visibility，而是display。例如：

display: none;

或

display: block;

单击信息框显示

2 个答案: