jquery - 为什么 jQuery hide 不是立即隐藏(因页面加载而延迟)

Question

我有什么:

我使用 jQuery 隐藏无序列表中的最后几个列表项。

我的问题:

列表项会显示在页面上，直到页面加载并且 jQuery 启动(这是不可取的)。

编辑:我无法编辑 HTML。由于我无法有选择地添加类，因此我不能依赖纯 CSS。我使用 jQuery 选择器来定位最后两个列表项。

我的代码:

无论我使用 hide() 函数还是 addclass() + display:none，我都会遇到同样的问题。

<ul id="some_menu">
    <li><a href="#">Enkidu</a></li>
    <li><a href="#">Gilgamesh</a></li>
    <li><a href="#">Epic</a></li>
    <li><a href="#">Sumeria</a></li>
    <li><a href="#">Anunnaki</a></li>
</ul>

<script type="text/javascript">
    jQuery(document).ready(function() {
        //jQuery('ul#some_menu li:gt(2)').addClass("hide_menu_link");
        jQuery('ul#some_menu li:gt(2)').hide();
    });
</script>

<style type="text/css">
    .hide_menu_link{
        display:none;
    }
</style>

这是 JSFIDDLE 上的代码，但它没有重现问题:http://jsfiddle.net/dominornovus/pB8Mb/2/

Answer 1

通过使用jQuery(document).ready，您可以告诉 jQuery 在执行之前等待文档准备好。因此，它确实会等待页面准备好(加载)然后再采取行动。

就像其他人所说，如果您希望某些项目在页面开始时隐藏，而其他一些项目可用，您应该反转逻辑，从隐藏的所有内容开始，然后在文档准备好时显示您想要显示的内容。