Блог

Я очень новичок в программировании и работаю над созданием веб — сайта для рабочего проекта. В нем на каждой странице будет многоуровневая (с подменю) вертикальная боковая панель. Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда пользователь нажимает на одну ссылку, боковая панель возвращается в исходное состояние и ей придется повторить то же самое и не очень удобно для UX.

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

Может кто-нибудь, пожалуйста, помочь мне с кодом JS, чтобы он заработал?

ОБНОВЛЕНИЕ: Натан, спасибо за написание мата! Я действительно ценю вашу помощь.

Поэтому, основываясь на вашем предложении, я написал следующий (дрянной) код, который вводит атрибут «проверено» в элемент ввода.

Но он не переходит на новую/перенаправленную html-страницу, когда пользователь нажимает на одно из подменю. Что я здесь упускаю?

 var menuIndex = -1;

//extract all the input elements
var inputs = document.querySelectorAll('.parent-menu');

//Find index of the element from the array that has "checked == true"
function indexFinder() {
    for (var i = 0; i < inputs.length; i  ) {
        if (inputs[i].checked == true) {
            menuIndex = i;
            console.log(menuIndex);
        }
    };
}

//Function to set/inject the attribute
function attributeSetter() {
    inputs[menuIndex].setAttribute('checked', 'checked')
}

//When a user clicks literally anywhere, it'll run the indexFinder function
//to check if any of the input elements were expanded (i.e. checked == true)
window.addEventListener('click', () => {
    indexFinder();
});

//Run the attributeSetter function when a page loads
window.addEventListener('DOMContentLoaded', () => {
    attributeSetter();
});
 

Добро пожаловать в мир программирования! Надеюсь, я смогу вам немного помочь! Итак, то, о чем вы просите, может легко немного усложниться. Чтобы достичь того, что вы пытаетесь сделать, вам нужно указать, как вы хотите, чтобы ваше меню выглядело на каждой отдельной странице! Позвольте мне представить несколько вариантов меню для воображаемого сайта:

Главная

Контакты

Электронная почта

Почта

О нас

компания

Наш Владелец

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

Ну, если вы возьмете свой обычный код с этой веб-страницы и скопируете и вставите его повсюду. Каждый раз, когда вы перезагружаете страницу (или переходите на другую страницу с тем же кодом), код будет сброшен! Таким образом, «закрывается» меню. Думайте об этом как о какой-то многомерной научной фантастике. Когда вы загружаете веб-страницу, вы получаете доступ к основному потоку времени, и каждый раз, когда вы обновляете эту страницу, она переносит вас в альтернативную реальность с этим изменением! но как только вы перезагрузите веб-страницу, вы вернетесь к основной временной шкале, как будто вы никогда не вносили этого изменения (когда вы перейдете к более продвинутой веб-разработке, эта аналогия сломается, но пока она должна помочь вашему пониманию).

Итак, допустим, я нажимаю на опцию «Контакты» > «Электронная почта», и она ведет меня на страницу электронной почты. Ну, для того, чтобы казалось, что мои изменения в строке меню (нажав «Связаться», чтобы развернуть выпадающий список) все еще активны. Мне нужно жестко закодировать изменение на странице электронной почты! Вот несколько примеров кода:

 <nav class="nav">
   <a class="navOption">Home<a>
   <a class="navOption">Contact<a>
   <div class="navDropdown">
       <a class="navOption">Email<a>
       <a class="navOption">Mail<a>
   </div>
   <a class="navOption">About<a>
   <div class="navDropdown">
       <a class="navOption">The Company<a>
       <a class="navOption">Our Owner<a>
   </div>
<nav>
 

По умолчанию .navDropdown он будет закрыт. Однако, когда мы добавим к ним класс .active , они будут расширяться! Если это мое базовое меню, то как мне сделать так, чтобы раскрывающийся список «О программе» расширялся, когда вы находитесь на одной из страниц «О программе»?
Просто добавив .active в этот раскрывающийся список!

 <nav class="nav">
   <a class="navOption">Home<a>
   <a class="navOption">Contact<a>
   <div class="navDropdown">
       <a class="navOption">Email<a>
       <a class="navOption">Mail<a>
   </div>
   <a class="navOption active">About<a>
   <div class="navDropdown">
       <a class="navOption">The Company<a>
       <a class="navOption">Our Owner<a>
   </div>
<nav>
 

Теперь мой пример отличается от вашего, потому что он больше предназначен для JavaScript. Однако вы также можете использовать ту же концепцию в своем коде.
Для вас, вместо того, чтобы иметь .active класс, чтобы развернуть выпадающее меню. Вы используете элемент флажка! В вашем коде у вас есть CSS, который проверяет, установлен ли флажок, а затем открывает выпадающее меню, если это так:

 <input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1">
 

Итак, если мы используем этот метод на нашем примере веб-страницы. Мы могли бы установить его открытым, установив флажок, чтобы начать проверку. Вот так:

 <input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1" checked>
 

Важно отметить, что по мере того, как вы становитесь все лучше и лучше в веб-разработке (в конечном итоге изучаете JavaScript и язык на стороне сервера, такой как PHP). Вы сможете собрать воедино более продвинутые методы для достижения того, чего мы пытаемся достичь! Но сейчас, я надеюсь, что мне удалось объяснить это для вас!