Question

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

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

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

我的问题是，当页面加载时，整个div会显示一瞬间，然后隐藏。有时这可能有点刺耳。我需要修复哪些内容才能在加载时显示div？

Answer 1

你可以在你的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>

只是一个建议。

Answer 2

您正在隐藏文档加载中的div，这就是为什么您在较慢的浏览器或较慢的计算机中看到它的瞬间。

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

#contact-drawer { display: none; }

但是如果你真的需要用JavaScript隐藏它，你可以在你的div下方包含一个立即执行而不是文档就绪的脚本，这将给你带来同样的效果。

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

Answer 3

正如Darko Z所说，这种闪烁的原因是浏览器呈现#contact-drawer元素与运行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时维护工作页面，您可以使用额外的:target CSS选择器并稍微更改链接和JavaScript。目标选择器是not 100% compatible with older browsers，但它比上面的普通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;
});

隐藏div显示瞬间（slideToggle / javascript）

3 个答案: