jQuery,在就绪时隐藏元素总是在页面加载时跳转。如何避免这种情况?

发布于 2024-08-30 18:13:49 字数 220 浏览 4 评论 0原文

这是代码。

我无法应用 display:none;

$(document).ready(function() {
    $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
});

This is the code.

I can't apply display:none;

$(document).ready(function() {
    $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

無心 2024-09-06 18:13:49

为什么不能设置“display:none”?不确定您的场景,但您可能可以稍微反转工作流程

,而不是最初显示列表,然后根据某些条件隐藏某些列表,最初尝试隐藏(显示:无)列表,然后根据某些条件显示某些列表。

这样,您就不会出现某些元素“显示然后消失”的情况。

why can't you set "display:none"? Not sure about your scenario, but you probably can reverse the work flow a little bit

instead of show list initially, then hide certain ones based on some condition, try hide(display:none) lists initially, then show certain ones based on some condition.

This way you don't end up with some elements "show then disappear".

您的好友蓝忘机已上羡 2024-09-06 18:13:49

不应用 display:none(调用 $.hide()),不如将您尝试隐藏的项目替换为设置为相同值的空 div大小与您想要隐藏的内容相同?

Instead of applying display:none, (calling $.hide()), how about replacing the item you are trying to hide with an empty div that is set to the same size as whatever you are trying to hide?

倦话 2024-09-06 18:13:49

不要等待文件准备好。您可以将 jQuery 代码放置在页面底部的结束正文标记之前,或者直接放置在相关元素之后。

            <!-- ...other code... -->
            <li>Sibling</li>
        </ul>
        <script type="text/javascript">
            // this should work...
            $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
        </script>
        <div class='content'>more stuff.</div>
    </body>
</html>

Don't wait for document ready. You can place your jQuery code at the bottom of the page before the closing body tag or alternatively, immediately after the elements in question.

            <!-- ...other code... -->
            <li>Sibling</li>
        </ul>
        <script type="text/javascript">
            // this should work...
            $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
        </script>
        <div class='content'>more stuff.</div>
    </body>
</html>
爱的那么颓废 2024-09-06 18:13:49

我经常发现 display:none; 的一个不错的替代方案是在加载时将不透明度设置为 0。

$("#LeftNav li.navCatHead").not(":first").siblings("li").css('opacity','0').end().end().first().addClass("open");

但我不会用这么长的字符串来查找选择器,而是为每个选择器添加一个新类,并在页面加载时将其设置为 opacity: 0;,因为这样会快得多。

I often find that a nice alternative for display:none; is setting the opacity to 0 on load.

$("#LeftNav li.navCatHead").not(":first").siblings("li").css('opacity','0').end().end().first().addClass("open");

But rather than have such a long string to find the selector, I would just add a new class to each one and set that to opacity: 0; on page load as it will be much much faster.

染火枫林 2024-09-06 18:13:49

我遇到了同样的问题,我使用了 JQuery 的 .hide() 函数,但是因为我将

对于解决方案,我提高了.hide()函数的速度,直到它快到用户看不到它为止。

这对我有用。

现在我的函数看起来像这样。

    $(document).ready(function(){
        $("#ids-or-classes").each(function(){ //.each is for multiple ids and classes 
        $(this).hide(0.00001); //lower the number faster the speed
        });
    });

希望它有所帮助,这是我第一次在我们最喜欢的社区上回答问题。干杯。

I had the same problem, I used JQuery's .hide() function but because I placed the <script> at end of body the elements were visible for split second till the browser could reach the end of code and run the hiding function.

For the solution I increased the speed of .hide() function till it was so fast that the user can't see it.

It worked for me.

So now my function looks something like this.

    $(document).ready(function(){
        $("#ids-or-classes").each(function(){ //.each is for multiple ids and classes 
        $(this).hide(0.00001); //lower the number faster the speed
        });
    });

Hope it helped, this was the first time I answered a question on our fav community. Cheers.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文