0

大量のデータが読み込まれるテンプレートがあります。そのテンプレートには 5 ～ 6 個の div も存在し、各 div には独自の目的があります。最初はすべての div がdisplay:noneとして作成されます。それぞれのボタンをクリックすると、div クラスが切り替えられます ( display:noneまたはdisplay:'' のいずれか)。テンプレートがサーバー側からすべてのデータを取得してロードしているとき、しばらく時間がかかり、その間にすべての div (display:none) が表示されます。つまり、display:noneプロパティが機能していません。ページがすべてのデータで完全に読み込まれると、display:noneのみが機能し、div が非表示になり、後で修正 (トグル) します。最初にdivの表示を制限するにはどうすればよいですか。

コード：

<div class="display_none" id="zip_search">
    <label>Enter Area Code</label>
    <input type="text" class="input-medium" id="search_zip" maxlength="5">
</div>

<a class="btn btn-primary" id="area_link">Show Area</a>

$("#area_link").click(function () {
    $("#zip_search").toggleClass("display_none");
});


.display_none{
    display:none;
}

ページが完全に読み込まれた後、div は非表示になり、その後 toggleClass() も正常に動作しています。

4

2 に答える 2

1

jQuery がドキュメント上で起動される準備はできていますか? このような：

$( document ).ready(function() {
    $("#area_link").click(function () {
        $("#zip_search").toggleClass("display_none");
    });
});

そうしないと、ページ (html + css) が完全に読み込まれていない間に、toggleClass 関数が実行されます。

于 2013-05-23T08:19:47.550 に答える
0

div に inline-css を使用するのはどうですか? ( style="display:none;") 確かに、これはあまり良い解決策ではありませんが、うまくいく可能性があります!

于 2013-05-23T08:27:05.037 に答える