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

Question

Изменение элемента отображения 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

добавлено 28 Декабрь 2012 в 08:56 автор Darren Sweeney

Просмотры: 3

источник

nl ja de be uk

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

добавлено 28 Декабрь 2012 в 08:57 автор Adil

источник

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Мини-курс по Angular и NgRx

16 видео-уроков

Инструменты успешного делегирования

Автор: Евгений Попов

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

автор Praveen Kumar · Answer 1 · 2012-12-28T08:59Z

Это синтаксис 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"

автор user1742161 · Answer 2 · 2012-12-28T09:13Z

Я думаю, что проблема заключается в том, что плагин «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>

автор Surinder ツ · Answer 3 · 2012-12-28T09:03Z

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

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

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

автор Seb T. · Answer 4 · 2012-12-28T09:09Z

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

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

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

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