尝试写入 javascript 以隐藏切换侧菜单 class，直到页面加载完毕。它目前会显示一瞬间，直到页面加载

Question

编辑-明白了，答案在下面，谢谢大家！

我带着另一个头疼的问题回来了，我整个上午都在处理这个问题，但我自己似乎无法解决，希望有人能帮助这个菜鸟。

我的 phone 处于响应模式时，我的 phpbb 论坛目前有问题（无法使用移动视图在桌面上复制它，但它发生在我的 phone 上，我假设大多数其他 phone，因为我的与其他 android) 没有太大区别。

所以我的问题是我的切换侧菜单在我希望加载之前就加载了。最简单的解释方法是用我制作的图片（无法截图，因为它停留的时间不够长）。

如您所见，header 展开大约一秒钟（或几分之一秒，足以让我烦恼），并且菜单项可见。由于某种原因，它不会完全像激活切换时那样显示，只有文本和边框项目是可见的。背景颜色确实保持隐藏。 header 的背景确实随着文本展开，这在切换激活时不应该发生，所以我不确定我需要做什么，希望我能得到一些帮助。

我来这里不只是希望有人能为我做这件事，我已经尝试了很多选择。

我看到一个类似的问题，建议在 .css 中使用 #selector，但我没有成功。

我试过这个脚本代码：

<script type="text/javascript">
// Short-form of `document.ready`
$(function(){
    $(".gf-menu-device-container").hide();
    $(".gf-menu-toggle").on("click", function(){
        $(".gf-menu-device-container").toggle();
    });
});
</script>

代码对我没有任何作用。我也试过用 .gf-menu-device-wrapper-sidemenu 代替，但也没有用。

这是该菜单的 html 代码，javascript 文件已缩小，我几乎不可能从中取出任何东西，但如果有人想看它，它就在这里： https://raiderforums.com/styles/corvus/template/rt_js/mootools-core.js

<div style="display: block;" class="gf-menu-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</div>

<div class="gf-menu-device-wrapper-sidemenu">
    <div class="gf-menu-device-container">
        <div class="gf-menu-device-container-wrapper">
            <ul class="gf-menu rt-desktop-menu l1  ">
                 <li class="items would follow">
             </ul>
         </div>
    </div>
</div>

Answer 1

您可以使用

display: none;

如前所述。虽然如果你需要在显示之前使用高度等计算，如 contentHeight 等，这是不合适的。

在这种情况下，您可以使用

opacity: 0.015;

或类似 CSS 甚至内联，并在通过 JavaScript 隐藏它之后将不透明度重置为 1 。这样可能就不会那么烦人了。

（是的，我知道，内联 CSS 是 丑陋的 但闪烁的框更丑陋。）

Answer 2

这是我的做法，感谢各位大侠的帮助。将内联 css 更改为 display:none，然后此脚本使其正常工作：

<script type="text/javascript"> 
$(document).ready( function(){ jQuery('.gf-menu').fadeIn(1000); }); 
</script>

看到我做的有什么问题吗？它有效，但也许我可以做不同的事情？

尝试写入 javascript 以隐藏切换侧菜单 class，直到页面加载完毕。它目前会显示一瞬间，直到页面加载

Trying to write javascript to hide toggle side menu class until page is loaded. It currently shows for a split second until page loads

html

javascript

jquery

toggleclass