为什么这个 <div> 不显示（）？答案

【问题标题】：Why wont this <div> show()?为什么这个 <div> 不显示（）？
【发布时间】：2023-03-14 05:59:02
【问题描述】：

我似乎在使用 JQuery Show() 时遗漏了一些东西。我已经对此进行了搜索，但从给定的示例中我看不出我的语法有什么问题。我尝试将脚本标签移动到文档底部。有什么基本的我不理解吗？

这是我的页面。我希望它显示隐藏的 div。

<!DOCTYPE html>
<head>

<style type="text/css">
.hidden {
    visibility: hidden;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".hidden").show()
    });
</script>
</head>
<body>
    <div class="hidden">
        <p>Can you see me?</p>
    </div>
</body>
</html>

我做错了什么？

【问题讨论】：

JQuery Visible Show 的可能重复项

标签： jquery html

【解决方案1】：

jQuery 的show() 方法使用display 属性。改为这样做：

.hidden {
   display: none;
}

这样做的好处是在第一次加载时不会占用 DOM 中的空间。

http://api.jquery.com/show/

【讨论】：

感谢您的快速回答。我会在时间限制允许的情况下尽快接受

【解决方案2】：

据我所知.show() 用于在display:none; 和display:block; 之间切换，将您当前的css 从visibility:hidden; 更改为display:none;，或者您可以尝试以下jquery 代码

<script type="text/javascript">
    $(document).ready(function() {
        $(".hidden").css('visibility','visible')
    });
</script>

【讨论】：

【解决方案3】：

jQuery .show() 正在秘密调用 .css( "display", "block") 并且没有修改您的 visible 属性。因此，您应该为 CSS 属性使用 display:none。

http://jsfiddle.net/r5wL752j/

【讨论】：

感谢您的解释

【解决方案4】：

jQUery 的隐藏/显示使用 CSS 属性 display，而不是 visibility。因此，如果您将 <div> 设置为 display: none，则您的示例有效。

【讨论】：

【解决方案5】：

你有两个选择。更改 css 或使用 css() 方法，如

选项 1

.hidden {
     display : none;
}

选项 2

    $(document).ready(function() {
        $(".hidden").css("visibility", "visible");
     });

【讨论】：