0

我对之前暂时显示的 Div 有问题，滑入视图。

如果没有 javascript 可用，则 Div 应该可见，如果 javascript 可用，则开始隐藏。我使用 css 和 javascript。

.no-js .show {
    display:block
}

$('body').removeClass('no-js').addClass('js-ok');

但是，我想滑动 div 而不仅仅是显示它。这是代码：

$('#site-cookie-notice').slideDown();

结果是 div 在被隐藏之前暂时显示（通过 css），然后用 javascript 重新显示。

关于如何解决这个问题的任何想法？

4

2 回答 2

1

我猜你正在使用 doc.ready？你需要像 Modernizr 那样使用阻塞 JS 来替换你的no-js类。这样它会在第一次渲染时被隐藏。Modernizr 是head这样做的：

var docElement = document.documentElement;
docElement.className = docElement.className.replace('no-js', 'js-ok');
于 2013-10-11T11:13:10.800 回答
0

是的。

  1. 将添加/删除js类的代码放在头部
  2. 不要$(document).ready()像很多人那样把它放在里面。
  3. 将 no-js 和 js-ok 的类放在你的 HTML 上，而不是你的 body （当你的代码被执行时你的 body 元素将不可用）

如果您这样做，那么在呈现页面的其余部分之前，这些类将应用于 HTML 元素（这意味着您的.no-js .showCSS 规则将永远不会被应用）。

像这样：

<!doctype html>
<html class="no-js">
 <head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js></script>
  <script>
    $('html').removeClass('no-js').addClass('js-ok');
  </script>
 </head>
 <body>
   ...
 </body>
</html>
于 2013-10-11T11:11:51.723 回答