[英]How do i hide html until its processed with javascript?
我正在使用一些JS代码将菜单转换为向下钻取菜单 。
问题是在运行JS之前，您会看到很大的链接混乱。 在他们的网站上，通过将js放在顶部来解决了问题。 使用yahoo / YSlow的建议，我将JS文件放在底部。
我试图用display隐藏菜单：无，然后使用jquery来显示.show（）、. css（'display'，''）、. css（'display'，'block'），它们都导致混乱菜单（我得到标题，但没有标题背景色或菜单的任何链接）
如何正确渲染div /菜单并在渲染后显示它？
在<head>放置：
<script>document.documentElement.className = 'js';</script>
现在，它将.js类添加到您的html元素中。 这将是页面上的javascript完成的第一件事。
在您的CSS中，您可以编写：
.js #menu {display：none; }
接着：
$(document).ready(function() {
$('#menu').css('display','block').fancyMenu();
});
这是一项出色的技术，如果您的用户禁用了JavaScript，则可以使您的页面“逐步增强” –她仍然可以看到内容，并且还可以将非JS样式与样式分开，这是相关的仅适用于菜单的JS版本，也许是“ position：absolute”之类的东西。
在页面顶部放置：
<script type="text/javascript">
document.write('<style type="text/css">');
document.write('#mylinks { display:none; }');
document.write('</style>');
</script>
在“处理”结束时，调用$('#mylinks').show();
在处理DOM时评估document.write ，这意味着在页面首次显示在视口之前，将在样式规则中注册此动态样式块。
这是一个很好的例子， 渐进增强确实可以很好地工作-如果您的用户具有可用的JS，并且已启用JS，则可以隐藏链接，直到它们准备就绪为止。 但如果不是，尽管难看，它们仍然可用。
如果您不使用JavaScript而不制作看起来像“一团糟”的网页，生活将会变得更加愉快。 放心
无论yahoo怎么说，对于您来说，在正文渲染之前，插入一个小脚本在ypur文档的头上添加一个带有一些规则的样式元素的脚本，可能都是值得的。
我找到了解决方案。 我应该让链接用css隐藏，然后在执行ddMenu代码之前而不是after之后显示.show（）。 ddMenu似乎在检查父级宽度，因为它隐藏了，所以我猜它为0。.show（）和ddMenu之间的时间足够快，无法显示丑陋的链接（在我的机器/浏览器上）。 大多数情况下（页面加载，JS文件的http req，JS编译/执行等）链接都是隐藏的，因此看起来不错。
$(function () {
$('.menuT1').show(); //do it before not after in this case.
$('.menuT1 > ul').ddMenu({
好吧，如果您熟悉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元素的集合？
[英]How do I hide a collection of HTML elements until the page is done loading?
如何让我的代码等到我从服务器获得处理过的图像以在 Javascript 中显示
[英]How can I make my code wait until I got processed image from the server to display in Javascript
如何在javascript中加载XSLT样式表，以便处理包含？
[英]How do I load XSLT Stylesheets in javascript so include is processed?
如何显示/隐藏<li>基于其使用 JavaScript 的文本内容？
[英]How do I show/hide an <li> based on its text content using JavaScript?
Javascript / html：如何存储div，并在以后隐藏其子级
[英]Javascript/html: How to store div, and hide its children later
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.