Изменение элемента отображения css после document.ready jquery

Я тестирую новый код меню и одну проблему с ним, заключается в том, что он загружает все, а затем прыгает на место, когда все закончил загрузку.

Так что я пытаюсь скрыть его, пока документ не будет готов, а затем покажу его

Итак, CSS, чтобы скрыть это:

#mega-menu-1 {
font: normal 13px Arial, sans-serif; 
list-style: none; 
position: relative; 
padding: 0; 
margin: 0;
margin-top:13px;
display: none;
}

Затем я вызываю jQuery в конце страницы, чтобы загрузить меню, а затем измените отображение на блок, но меню не отображается

Вот jquery, я пытаюсь:

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $('#mega-menu-1').css('display') == 'block';
    });
</script>

Каков правильный способ сделать это?

0

5 ответы

Если вы пытаетесь установить свойство display , то у вас неправильный синтаксис для функции jQuery css() , вам нужно CSS (propertyName, value) , чтобы установить значение свойства.

Change

$('#mega-menu-1').css('display') == 'block';

Для

$('#mega-menu-1').css('display', 'block') ;

OR You can also call jQuery show() method that will do the same.

$('#mega-menu-1').show();
5
добавлено

Это синтаксис jQuery, а не JavaScript.

Заменить:

$('#mega-menu-1').css('display') == 'block';

С:

$('#mega-menu-1').css('display', 'block');

И если вы хотите использовать геттеры и сеттеры:

Set: $('#mega-menu-1').css('display', 'block');

Get: $('#mega-menu-1').css('display');

Compare: $('#mega-menu-1').css('display') == "block"

1
добавлено

Я думаю, что проблема заключается в том, что плагин «dcMegaMenu» загружен только из внешнего источника (JS-файл). Попробуйте это, это помогло мне раз в другом проекте:

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $(document).find('#mega-menu-1').css({'display' : 'block'});
    });
</script>
1
добавлено

Вы должны использовать:

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $('#mega-menu-1').show();
    });
</script>

справочный веб-сайт

0
добавлено

Я сделал вам страницу jsFiddle , где отображается ваше меню.

Небольшое обновление в значении отображения изменилось, но я также прокомментировал ваш оператор .dcMegaMenu (потому что вы не предоставляете никакой информации об этом). И если у вас все еще есть проблема, вероятно, потому, что она терпит неудачу на этом.

$('#mega-menu-1').css('display', 'block');

Надеюсь это поможет.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)