0

デフォルトでdivを非表示にし、リンクをクリックするとslideTogglesするスクリプトがあります（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

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 が無効になっているときに作業ページを維持するには、追加の:targetCSS セレクターを使用して、リンクと JavaScript を少し変更することができます。ターゲット セレクターは、古いブラウザーと 100% 互換性があるわけではありませんが、上記のプレーンな CSS バージョンよりもアクセスしやすくなっています。

CSS

上記と同じスタイルを追加し、selector で block にコピー設定表示を追加します: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 に答える
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 に答える