在用 javascript 处理之前，如何隐藏 html？答案

【问题标题】：How do i hide html until its processed with javascript?在用 javascript 处理之前，如何隐藏 html？
【发布时间】：2010-05-29 07:45:22
【问题描述】：

我正在使用一些 JS 代码将我的菜单转换为 drilldown menu。

问题是在它运行 JS 之前你会看到一大堆丑陋的链接。在他们的网站上，它通过将 js 放在顶部来解决。使用 yahoo/YSlow 的建议，我将 JS 文件保留在底部。

我尝试使用 display:none 隐藏菜单，然后使用 jquery 到 .show(), .css('display', ''), .css('display', 'block') 并且它们都导致混乱的菜单（我得到了标题，但没有标题背景颜色或菜单的任何链接）

如何正确隐藏 div/菜单并在渲染后显示？

【问题讨论】：

你的 html/js 是必要的。你所做的在理论上是有效的。
你用 .show() 做的事情听起来不错，但也许你调用 .show() 太早了。修改菜单后尝试调用 .show() （当它仍然显示时：无）。

标签： javascript html css

【解决方案1】：

在<head> 中放置：

<script>document.documentElement.className = 'js';</script>

现在，它将 .js 归类到您的 html 元素。这将是页面上的 javascript 完成的第一件事。

在你的 CSS 中你可以写：

.js #menu { 显示：无； }

然后：

$(document).ready(function() { 
    $('#menu').css('display','block').fancyMenu();
});

这是一项出色的技术，可以让您的页面“逐步增强”，如果您的用户禁用了 JavaScript，她仍然可以看到内容，您还可以将非 JS 样式与样式分开，这仅与您的菜单的 JS 版本相关，可能是“位置：绝对”之类的东西。

【讨论】：

【解决方案2】：

在页面顶部放置：

<script type="text/javascript">
    document.write('<style type="text/css">');
    document.write('#mylinks { display:none; }');
    document.write('</style>');
</script>

在“处理”结束时，致电$('#mylinks').show();

document.write 在处理 DOM 时被评估，这意味着该动态样式块将在页面首次显示在视口中之前注册到样式规则中。

这是一个很好的例子，progressive enhancement 工作得很好——如果你的用户有可用的 JS 并启用，你隐藏链接直到它们准备好；但如果没有，它们仍然可用，尽管很难看。

【讨论】：

【解决方案3】：

如果您在没有 javascript 的情况下尽量避免让页面看起来像“一团糟”，那么生活会对您更加温和。有一颗心。

无论 yahoo 怎么说，在正文呈现之前，插入一个小脚本，将带有一些规则的样式元素添加到 ypur 文档的头部，这可能是值得的。

【讨论】：

【解决方案4】：

我找到了解决方案。我应该在 ddMenu 代码执行之前而不是之后使用 css 然后 .show() 隐藏链接。 ddMenu 似乎检查了父母的宽度，并且因为它隐藏了我猜它为 0。 .show() 和 ddMenu 之间的时间足够快，不会显示丑陋的链接（在我的机器/浏览器上）。大多数时候（页面加载、JS 文件的 http req、JS 编译/执行等）链接是隐藏的，所以看起来不错。

$(function () {
    $('.menuT1').show(); //do it before not after in this case.
    $('.menuT1 > ul').ddMenu({

【讨论】：

您可能需要跨浏览器进行测试，因为您可能会得到不同的结果。请参阅 Rex 的答案，因为它可能更强大。

【解决方案5】：

好吧，如果你熟悉 jquery，那么我会做这样的事情

$("#mybuttom").click(function() {
           $("#mydiv").hide(); //hide the div at the start of process
           $.post( "mypostpage.php", 
                   { testvar: testdata },
                   function(data) {
                         //callback function after successful post
                         $('#mydiv').show(); //show it again
                   }
           );
});

【讨论】：