Случайный вопрос

Как заблокировать меню боковой панели, скрытое при обновлении страницы

1

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

.sidebar {
height: 100%;
width: 250px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: var(--sidebar-color);
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all 0.5s ease;
overflow-y: auto;
/* hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;

}

.sidebar.expand {
width: 65px;

} 

var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");

btnToggle.onclick = function() {
    sidebar.classList.toggle("expand");

}

Изображение 59

Изображение 60

  • 2
    Если вы хотите, чтобы он был постоянным, вам нужно использовать localStorage для хранения состояния боковой панели. Затем, когда страница перезагружается, вы можете прочитать состояние из localStorage и соответствующим образом установить класс.
  • 1
    Window.localStorage.setItem('displaySidebar', true); установить его и Window.localStorage.getItem('displaySidebar'); чтобы получить это.
Теги:
javascript
html
css
sidebar
CodeFix

1 ответ

0

Если вы хотите, чтобы он был постоянным, вам нужно использоватьlocalStorage для сохранения состояния боковой панели. Затем, когда страница перезагружается, вы можете прочитать состояние изlocalStorage , и соответственно установите класс на боковой панели.

Непроверенный код ниже:

var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");

// When the page loads, use localStorage to set the initial class

if(localStorage.getItem("expand") && localStorage.getItem("expand") == "true"){
  sidebar.classList.add("expand");
}

btnToggle.onclick = function() {
  sidebar.classList.toggle("expand");
  localStorage.setItem("expand", sidebar.classList.contains("expand"));
}

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

Поделиться
Источник
  • 0
    Я пробовал то, что вы имеете в виду, но слайд или ход показываются. Я хочу, чтобы меню боковой панели не двигалось
  • 0
    Вы можете создать новые классы css для обработки перехода для анимации вставки и вывода. Затем вы можете удалить и добавить эти классы только в btnToggle.onclick . Класс expand может использоваться только для состояния боковой панели, но не для анимации. Просто transition: all 0.5s ease; от sidebar и поместить его в slide-in , slide-out класса. Я думаю, это должно сработать.
  • 0
    Я попытался удалить переход, но он все еще движется
  • 0
    Я создал минимальный CodePen, чтобы проиллюстрировать технику выдвижения, о которой я говорил: codepen.io/johnedvard/pen/abJYOyE?editors=1111 Может быть, вы используете transition: другие места в коде? Я не включил в ручку часть localStorage.
  • 0
    @Syahrir Я включил указанное выше перо, чтобы также использовать localStorage . Я также немного скорректировал его, и вам нужен только один slide-in-out класс, который вы можете добавить только при нажатии кнопки. Тогда боковая панель не должна анимироваться.

Другие вопросы

  • Фоновое изображение заголовка исчезает и исчезает при прокрутке с нижним градиентом в приложении React1 ответ

    Мое изображение заголовка исчезает (исчезает при прокрутке). Я достиг этого остроумного javascript в моем приложении React:useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ window.pageYOffse...

  • Состояние редактирования внутри модального окна1 ответ

    Я делаю небольшое приложение для заметок. Когда пользователь пишет свой заголовок и заметку и нажимает «Отправить», заметка помещается на страницу ... Я хочу иметь возможность редактировать заметку. При нажатии кнопки редактирования появляется модальное окно, и я хочу, чтобы заголовок и примечание п...

  • Выберите элемент, необходимый в vuejs, не работает1 ответ

    Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...

  • Функция клавиатуры работает только один раз для первой буквы ввода2 ответ

    У меня есть текстовый ввод, где пользователь вводит желаемое имя страницы<input type='text' id='pageName' name='PageName' class='form-control pageName'> Я пытаюсь использовать функцию keyup для запуска Ajax, чтобы проверить, существует ли страница, однако при вводе чего-то вродеindex Ajax от...

  • как добавить ссылки на липкую панель навигации1 ответ

    Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...

  • Написание умных средств защиты типов для типов объединения и обобщений1 ответ

    У меня следующая структура:const fragmentTypes = [ 'Word', 'Sentence', ] as const; type FragmentType = typeof fragmentTypes[number]; interface IFragmentData { type: FragmentType; } interface IFragment<T extends IFragmentData> { id: string; type: T['type']; data: Omit&...

  • Включение и отключение кнопки отправки с флажками1 ответ

    Я использую Formik для своих форм React, которые я тоже довольно новичок, у меня есть форма с двумя флажками и кнопкой отправки, которая по умолчанию отключена. Мне нужно найти способ проверить, установлен ли флажок. Если все два флажка были отмечены, кнопка отправки активна, а если какой-либо из ни...

  • Состояние реакции не меняется после нажатия какой-либо кнопки2 ответ

    После вызоваhandleButton нажав наLog In кнопку один раз, значениеlogInStatus пустой. Однако после второго щелчка значениеlogInStatus изменится. Я знаю, что setState - это асинхронный вызов, поэтому он не будет обновлять значениеlogInStatus немедленно. Как мне подойти к решению?import React, {setStat...

  • Регулярное выражение Javascript возвращает null для ссылок Markdown1 ответ

    На этот вопрос уже есть ответ : Почему это регулярное выражение javascript не работает? (1 ответ) Закрыт 11 дней назад . Я хочу преобразовать ссылки Markdown в массив, где первый элемент является URL-адресом, а второй элемент - отображаемой ссылкой. Я написал этот код для его анализа:const input = ...

  • Как я могу получить счетчик из setInterval?3 ответ

    У меня есть интервал, через который нужно выполнить несколько HTTP-запросов через одну минуту setInterval(() => { this.takeTableDataCallInterval(); }, 60000); Как я могу получить счетчик минус из моего номера интервала? Например, каждую секунду я хочу показывать что-то вроде60 second...

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум