1

是）我有的：

我正在使用 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/

4

3 回答 3

4

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

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

于 2012-10-21T23:18:57.327 回答
1

如果您希望在加载时隐藏这些元素，则需要使用 CSS 来隐藏它们。等到页面加载完毕后再开始使用 javascript 操作它通常是一个好主意，否则您尝试隐藏的元素可能尚未加载。

根据您的要求，您可以通过多种方式使用 CSS 隐藏它们。

display: none;当您调用时，jQuery 将其设置为内联样式.hide()

于 2012-10-21T23:14:44.970 回答
0

问题是因为 jQuery 是客户端执行的，所以，首先代码来自服务器并显示给你的浏览器，在加载 DOM 并准备好 jQuery 之后将执行，所以它总是这样，除非您将其隐藏在服务器端语言中或使用 css 规则。

于 2012-10-21T23:16:05.940 回答