Question

我正在写一本免费的在线电子书，需要进行一些小的格式调整：

＆＃34;完整目录＆＃34;在页面的最顶部开始通过几秒钟可见，然后最终折叠自己隐藏。我们需要的是它以隐藏的方式启动，并且在页面加载的几秒钟内根本不可见。你可以看到我已经尝试通过设置＆＃34; var index_hidden = 1;＆＃34;来解决这个问题。在以下链接中，否则目录根本不会隐藏自己：

https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833

它可能不重要，但我使用一些自定义Perl脚本从Perl POD源生成此文件，如果需要，我可以提供更多信息。

Answer 1

虽然我没有看到所描述的行为（OSX + Firefox）。以下是您可能会做的事情：

默认使用CSS隐藏元素。将其添加到您的head元素中（在需要时使用更强大的隐藏CSS扩展）。

<style>.wait-for-js { display: none; }</style>

通过添加类

来隐藏元素

<div id="index-container" class="hide-index wait-for-js">

最后但同样重要的是，要使这个技巧发挥作用。加载JS后立即删除该类，这也意味着已加载其他逻辑并且您将保存以显示目录。一定要加载这个JavaScript你最后做的事情。

<script>
    document.getElementById('index-container').className = 'hide-index';
</script>

或者如果您正在使用jQuery

<script>$('.wait-for-js').removeClass('wait-for-js');</script>

欢迎来到SO！

CSS＆amp; Javascript，默认需要隐藏自动生成的HTML

1 个答案: