javascript - 在html表单焦点和模糊上显示/隐藏div？

Question

当用户单击 html 表单输入“文本”（焦点）然后隐藏模糊时，我试图显示一个 div。

它可以工作，但由于某种原因，div 在用户点击文本输入字段之前就显示出来了。我试图让它只在用户专注于文本字段时显示，并在他们点击它时隐藏？

有人可以告诉我哪里出错了吗？谢谢

<script>
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
    </script>

    <div class="infobox-profile">hello</div>

Answer 1

将您的代码放入$(function() { ... }

<script>
$(function() {
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
});
</script>

您的 JavaScript 可能infobox-profile在 DOM 的一部分之前执行。

工作示例

http://jsfiddle.net/bikeshedder/KxMcy/

Answer 2

就个人而言，我不会在使用 JS 加载时隐藏它，你可以在你的 css 中添加display: none;属性。.infobox-profile就像bikeshedder说的。把你的代码放进去$(function(){ INHERE });