javascript - 限制在页面加载期间显示的 div

Question

我有一个模板，其中正在加载大量数据。在该模板中，还存在 5-6 个 div，每个 div 都有自己的用途。最初所有的 div 都被制作成 display:none。单击相应的按钮时，将切换 div 类(display:none 或 display:'')。当模板加载从服务器端获取所有数据时，它需要一些时间，同时显示所有 div(显示:无)。这意味着 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() 也正常工作。

Answer 1

您的 jQuery 在文档准备就绪时触发了吗？像这样:

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

否则 toggleClass 函数将在页面 (html + css) 未完全加载时执行。