Мобильная версияНужна помощь: сворачиваемое меню с использованием функции изменения размера JQuery ⇐ Jquery
-
Anonymous
Нужна помощь: сворачиваемое меню с использованием функции изменения размера JQuery
При ширине менее 850 пикселей имеется кнопка, при нажатии на которую отображается меню. Я бы хотел, чтобы после 850 пикселей кнопка исчезала и переключалось отображение меню. Эта часть работает, но мне бы также хотелось, чтобы, когда окно превышало 850 пикселей и возвращалось ниже 850 пикселей, меню скрывалось независимо от того, была ли нажата кнопка или нет. Все работает.
Единственная проблема заключается в том, что теперь, как я настроил, если при нажатии кнопки происходит событие изменения размера, меню снова сворачивается. Я бы хотел, чтобы меню оставалось, если ширина окна меньше 850 пикселей.
Не совсем уверен, что я могу сделать с кодом, чтобы оба этих события произошли.
jQuery(document).ready(function($) { $('.navbar-toggle').click(function() { $('.navbar-collapse').toggleClass('invisible'); }); $(окно).resize(функция() { if ($(window).width() < 850 && !$('.navbar-collapse').hasClass('invisible')) { $('.navbar-collapse').addClass('невидимый'); } }); }); nav { дисплей: гибкий; flex-flow: перенос строк; оправдание-содержание: пространство между; выровнять-элементы: по центру; отступ: 0 1,5рем; } .navbar-toggle { высота: 40 пикселей; цвет фона: прозрачный; цвет: RGB(150, 150, 150); ширина границы: 1 пиксель; радиус границы: 5 пикселей; поле слева: авто; поле снизу: -10 пикселей; отступы: 5 пикселей 10 пикселей; } .navbar-toggle:hover { фон: прозрачный; цвет: RGB(229, 229, 229); текстовое оформление: нет; контур: 0; поле-тень: 0 0 0 3px RGB (229, 229, 229); } .невидимый { дисплей: нет; } .navbar-collapse { гибкая основа: 100%; } .navbar-collapse ul { дисплей: блок; } .navbar-collapse li { border-bottom: 1px сплошной rgba(0,0,0,.08); заполнение: 1рем 0; }@media screen и (минимальная ширина: 850 пикселей) { .navbar-toggle { дисплей: нет; } .navbar-collapse { дисплей: блок; гибкая основа: авто; маржа сверху: 10 пикселей; } .navbar-collapse ul { дисплей: гибкий; } .navbar-collapse li { нижняя граница: нет; отступ: 0 пикселей 8 пикселей; } Марко Лапенья [*]ВЕБ-ДИЗАЙН [*]УГОЛ PEI [*]ОБО МНЕ
При ширине менее 850 пикселей имеется кнопка, при нажатии на которую отображается меню. Я бы хотел, чтобы после 850 пикселей кнопка исчезала и переключалось отображение меню. Эта часть работает, но мне бы также хотелось, чтобы, когда окно превышало 850 пикселей и возвращалось ниже 850 пикселей, меню скрывалось независимо от того, была ли нажата кнопка или нет. Все работает.
Единственная проблема заключается в том, что теперь, как я настроил, если при нажатии кнопки происходит событие изменения размера, меню снова сворачивается. Я бы хотел, чтобы меню оставалось, если ширина окна меньше 850 пикселей.
Не совсем уверен, что я могу сделать с кодом, чтобы оба этих события произошли.
jQuery(document).ready(function($) { $('.navbar-toggle').click(function() { $('.navbar-collapse').toggleClass('invisible'); }); $(окно).resize(функция() { if ($(window).width() < 850 && !$('.navbar-collapse').hasClass('invisible')) { $('.navbar-collapse').addClass('невидимый'); } }); }); nav { дисплей: гибкий; flex-flow: перенос строк; оправдание-содержание: пространство между; выровнять-элементы: по центру; отступ: 0 1,5рем; } .navbar-toggle { высота: 40 пикселей; цвет фона: прозрачный; цвет: RGB(150, 150, 150); ширина границы: 1 пиксель; радиус границы: 5 пикселей; поле слева: авто; поле снизу: -10 пикселей; отступы: 5 пикселей 10 пикселей; } .navbar-toggle:hover { фон: прозрачный; цвет: RGB(229, 229, 229); текстовое оформление: нет; контур: 0; поле-тень: 0 0 0 3px RGB (229, 229, 229); } .невидимый { дисплей: нет; } .navbar-collapse { гибкая основа: 100%; } .navbar-collapse ul { дисплей: блок; } .navbar-collapse li { border-bottom: 1px сплошной rgba(0,0,0,.08); заполнение: 1рем 0; }@media screen и (минимальная ширина: 850 пикселей) { .navbar-toggle { дисплей: нет; } .navbar-collapse { дисплей: блок; гибкая основа: авто; маржа сверху: 10 пикселей; } .navbar-collapse ul { дисплей: гибкий; } .navbar-collapse li { нижняя граница: нет; отступ: 0 пикселей 8 пикселей; } Марко Лапенья [*]ВЕБ-ДИЗАЙН [*]УГОЛ PEI [*]ОБО МНЕ
