Пытается написать javascript, чтобы скрыть класс бокового меню toggle до загрузки страницы. В настоящее время он показывает на долю секунды, пока страница не загружается

Question

EDIT- Получил это, ответ ниже, спасибо всем!

Я вернулся с другим головным скрестом, над которым я работал все утро, и, похоже, не могу решить самостоятельно и надеялся, что кто-то поможет этому новичку.

В настоящее время у меня проблема с моим форумом phpbb, когда он находится в оперативном режиме на моем телефоне (не может дублировать его на рабочем столе с помощью мобильного вида, но это происходит на моем телефоне, и я предполагаю, что большинство других телефонов, сильно отличается от любого другого андроида).

Таким образом, моя проблема в том, что мое меню с переключением загружается, прежде чем я захочу. Самый простой способ объяснить - с рисунком, который я сделал (не мог снять снимок, потому что он не остается достаточно долго).

Как вы можете видеть, в течение секунды (или доли секунды, просто достаточно долго, чтобы ошибка меня), заголовок расширяется и пункты меню видны. Он не отображается точно так, как если бы он был активирован, по какой-то причине видны только текстовые и пограничные элементы. Цвет фона остается скрытым. Фон заголовка расширяется с текстом, который не должен делать, когда активируется переключатель, поэтому я не совсем уверен, что мне нужно делать, надеясь, что смогу получить некоторую помощь.

Я не просто пришел сюда, надеясь, что кто-то сможет это сделать для меня, я пробовал много вариантов.

Я видел аналогичный вопрос, где было рекомендовано использовать #selector внутри .css, но мне не повезло с этим.

Я попробовал этот скрипт:

<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, но ничего с этим тоже.

Вот код для этого меню, а также Java-файл минимизированы и почти невозможно для меня, чтобы получить что-нибудь из, но если кто-то хотел бы посмотреть на него, это здесь: 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

Вот как я это сделал, спасибо за помощь, ребята.Изменен встроенный CSS для отображения: нет, то этот сценарий не получил это работает:

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

Смотрите ничего плохого с тем, что я сделал? Это работает, но, возможно, я мог бы сделать это по-другому?

Answer 2

Вы можете использовать

display: none; 

как указано. Если вам нужно использовать вычисления, такие как высота и т. Д., Прежде чем показывать его, например contentHeight и т. Д., Это не подходит.

В этом случае вы можете использовать

opacity: 0.015; 

или аналогичный в CSS или даже встроенный, и сбросить непрозрачность 1 после скрывая его с помощью JavaScript. Таким образом, это может быть не так уж тревожно.

(Да, я знаю, встроенный CSS является некрасиво но мигающие коробки более того.)