Question

我有一个模板，其中加载了大量数据。在该模板中，还存在5-6个div，每个div都有其自己的用途。最初所有的div都是 display：none 。点击相应按钮后，div类将被切换（显示：无或显示：''）。当模板加载从服务器端获取所有数据时，花费一些时间，同时显示所有div（显示：无）。这意味着 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");
    });
});

否则当页面（html + css）未完全加载时，toggleClass函数将执行。

Answer 2

为div使用inline-css怎么样？（style="display:none;"）当然，这不是一个非常好的解决方案，但它可以做到这一点！

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

2 个答案: