0

我有一个默认隐藏 div 的脚本，并在单击链接时将其滑动切换（请参阅http://zarin.me -- 联系链接）。这是我正在使用的代码：

<script>
$(document).ready(function(){
    $("#contact-drawer").hide();
    $(".toggle-drawer").show();

    $('.toggle-drawer').click(function(){
    $("#contact-drawer").slideToggle();
}); 
});
</script>

我的问题是，当页面加载时，整个 div 会显示片刻，然后隐藏。有时这可能有点刺耳。我需要修复什么以使 div 在加载时不显示？

4

3 回答 3

2

你可以在你的 CSS 中添加 display none，这样加载时它就已经隐藏了，然后 jQuery 应该处理显示。

例如

<style>
#contact-drawer {
display:none;
}
</style>
<script>
$(document).ready(function(){
    $(".toggle-drawer").show();

    $('.toggle-drawer').click(function(){
        $("#contact-drawer").slideToggle();
    }); 
});
</script>

只是一个建议。

于 2012-06-22T02:34:22.237 回答
1

您在文档加载时隐藏了您的 div，这就是为什么您在较慢的浏览器或较慢的机器上看到它的原因。

一个更好的方法是在 CSS 中隐藏 div，这意味着 div 在文档显示之前就被隐藏了。

#contact-drawer { display: none; }

但是如果你真的需要用 JavaScript 隐藏它，你可以在你的 div 正下方包含一个脚本，它会立即执行而不是在文档准备好时执行，这会给你同样的效果。

<div id="contact-drawer" .... />
<script .... >
    $("#contact-drawer").hide();
</script>
于 2012-06-22T02:33:55.383 回答
1

#contact-drawer正如 Darko Z 下面所说，这种闪烁的原因是浏览器渲染元素和您的 JavaScript 代码运行之间存在延迟。浏览器正在按照您的 CSS 和 HTML 的指示执行操作并显示元素，然后才表明文档已完成解析（DOM 就绪）并触发您的 JavaScript。

有几种方法可以解决这个问题（具有不同的兼容性）。本质上，您需要在元素渲染和 DOM 准备就绪之间或之前解释代码。

要使用 JavaScript 进行修补，您可以在元素之后立即添加一个内联脚本以将其显示设置为隐藏。此代码将在页面被解释时立即执行，而不是在 DOM 准备好时执行。就可访问性而言，我相信这是最简单、最安全的方法。

纯 JavaScript：

<section id="contact-drawer"></section>
<script>document.getElementById('contact-drawer').style.display = 'none';</script>

或使用 jQuery：

<section id="contact-drawer"></section>
<script>$("#contact-drawer").hide();</script>

要使用纯 CSS 进行修复，您可以将元素的显示属性设置为“无”。请注意，使用此解决方案，如果 JavaScript 被禁用，表单将无法访问。

CSS

#contact-drawer {
    display:none;
}

要修复 CSS 并在禁用 javascript 时维护工作页面，您可以使用额外的:targetCSS 选择器并稍微更改链接和 JavaScript。目标选择器与旧浏览器不是 100% 兼容，但它比上面的纯 CSS 版本更易于访问。

CSS

添加与上面相同的样式，并使用选择器阻止复制设置显示:target。这使得当您导航到http://zarin.me/#contact-drawer时，将激活 :target 样式并显示 #contact-drawer。

#contact-drawer {
    display:none;
}
#contact-drawer:target {
    display:block;
}

HTML

将锚点 href 从 更改为#，#contact-drawer以便在单击链接时激活:target选择器。

<h3 class="contact">
    <a href="#contact-drawer" class="toggle-drawer" style="">
        <img src="img/envelope.png">
        CONTACT
    </a>
</h3>

JavaScript

return false在函数末尾添加以在单击时停止浏览器导航#contact-drawer（并激活:target选择器）.toggle-drawer。

$('.toggle-drawer').click(function(){
    $("#contact-drawer").slideToggle();
    return false;
});
于 2012-06-22T02:53:38.193 回答