Question

我之前暂时显示的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重新显示。

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

Answer 1

我猜你在使用doc.ready？您需要像Modernizr那样使用阻塞JS来替换头部中的no-js类。这样，它会在首次渲染时隐藏。 Modernizr在head中这样做：

var docElement = document.documentElement;
docElement.className = docElement.className.replace('no-js', 'js-ok');

Answer 2

是

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

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

像这样：

<!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>

在使用javascript时滑动显示之前的Div

2 个答案: