Question

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

问题出在运行JS之前，你会发现一大堆链接。在他们的网站上，通过将js置于顶部解决了问题。使用yahoo / YSlow的建议我将JS文件保留在底部。

我尝试用display：none隐藏菜单，然后使用jquery转换为.show（）,. css（'display'，''）,. css（'display'，'block'）它们都导致了弄乱了看菜单（我得到的标题，但不是标题背景颜色或菜单的任何链接）

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

Answer 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版本相关，也许是“position：absolute”等等。

Answer 2

在页面顶部放置：

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

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

在处理DOM时评估

document.write，这意味着在页面首次显示在视口中之前，将在样式规则中注册此动态样式块。

这是progressive enhancement非常有效的好例子 - 如果您的用户有JS可用＆amp;启用后，您可以隐藏链接，直到它们准备就绪;但如果没有，它们仍然可用，虽然很难看。

Answer 3

如果你不尝试在没有javascript的情况下制作看起来像“一个大丑陋的混乱”的页面，生活对你会更温和。有一颗心。

无论雅虎说什么，在身体呈现之前插入一个小脚本，在ypur文档的头部添加一个带有一些规则的样式元素可能是值得的。

Answer 4

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

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

Answer 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
                   }
           );
});

如何隐藏html直到用javascript处理？

5 个答案: