Блог

Главная - Вопросы по программированию - Код CSS/JavaScript работает при реализации, но когда я обновляю страницу, он не работает

Код CSS/JavaScript работает при реализации, но когда я обновляю страницу, он не работает

#javascript #html #css #onclick #hidden

Вопрос:

Я использую HTML-виджет для Elementor, конструктора тем WordPress. Я пытаюсь показать/скрыть разделы ( sect1 - sect12 с именами HTML, CSS, Javascript и Node), когда я нажимаю на определенные кнопки ( btn1, btn2, btn3 с именами Frontend Developer, Backend Developer и Designer), и я заставил это работать, но когда я обновляю страницу, кнопки становятся недоступными. Каждая кнопка управляет 4 секциями, так btn1 что -> > sect1 - sect4 , btn2 -> > sect5 - sect8 , btn3 -> > sect9 - sect 12 .

 <script>
.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #D9D3FF !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
const buttons = [...document.querySelectorAll("[id^='btn']")]
const mapping = [[0, 4], [4, 8], [8,12]]
const sections = [...document.querySelectorAll("[id^='sect']")]

for(let i = 0; i < 3; i  ) {
  buttons[i].addEventListener('click', function(event) {
    event.preventDefault();
    toggleDivs(this)
    for(let j = mapping[i][0]; j < mapping[i][1]; j  ) {
      sections[j].classList.add("shown", "fade")
    }
  })
}

function toggleDivs(btn){
  buttons.forEach(b => b.classList.remove("btn_active_state"))
  btn.classList.add("btn_active_state")
  sections.forEach(s => s.classList.remove('shown'))
}

//force button1 state initialise, if required
btn1.focus();
btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #D9D3FF !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>

введите описание изображения здесь

Ответ №1:

Вы пытаетесь составить меню аккордеона?

Вы можете показать-скрыть с помощью триггера

Комментарии:

1. Да, в принципе, но в Elementor я не могу выбрать количество столбцов, на которые я хочу растянуть аккордеон. В моем случае мне нужен аккордеон с 2 «меню» в первом столбце и 1 меню во втором столбце

2. Можете ли вы нарисовать точную структуру, которую хотите, и отправить ее? simsekm@msn.com

3. Я не понимаю, какое это имеет отношение к моему вопросу. Моя структура работала, но только тогда, когда я реализовал ее в первый раз. Когда я обновляю страницу, она больше не работает.

4. Я бы сделал это и отдал тебе

5. Я отправил свой код. Я также приложу изображение структуры в том виде, в каком я ее создал на своем веб-сайте. Текстовые поля-это просто заполнители для того, что я собираюсь написать позже. Я также отредактировал описание вопроса для лучшего разъяснения

Метки: , ,