JQuery пользовательский аккордеонный css-counter перекрывается - PullRequest
Новая
       22

JQuery пользовательский аккордеонный css-counter перекрывается

0 голосов
/ 16 октября 2018

Я собираюсь помешаться, пытаясь понять, почему мой счетчик CSS перегружен в jQuery UI Accordion.

У меня есть разделы, и внутри разделов у меня есть различное количество Ul> LI.Я применил сброс счетчика к тегу body и установил инкремент к классу, назначенному для тегов SPAN внутри LI.

Когда я раскрываю разделы, я вижу приращение чисел, но когдаанимация завершена, число начинается с 1 в каждом разделе.

Очевидно, что в этом вопросе должно быть много кода, поэтому лучше всего просто указать вам на страницу ввопрос: https://zindolabs.com/course/create-your-signature-system/

Вот CSS для всего этого: 

body {
  counter-reset: lesson-counter !important;
}
.lesson-title::before {
  counter-increment: lesson-counter !important;
  content: counter(lesson-counter,decimal-leading-zero);
  font-size: 2em;
  color: darkgrey;
  vertical-align: middle;
  margin-left: -30px;
  padding-right: 20px;
}

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

PS У меня также есть загрузка аккордеона внутри модуля Divi (строитель), но я не уверен, что это связано с проблемой.

Любые советыбудет признателен.

С наилучшими пожеланиями

1 Ответ

0 голосов
/ 16 октября 2018

Я думаю, что ваш код в порядке, но он не работает должным образом, потому что счетчик CSS пропускает элемент, если сам элемент или контейнер невидимы для "display:none".Каждая ваша часть аккордеона по умолчанию "display: none", кроме активной.Когда вы активируете другой, текущий будет отображаться как «display: none».Поэтому считайте только активный раздел и пропускайте остальные.

Решение:

Вам нужно, чтобы каждый ваш раздел оставался по умолчанию display:block в любом случае, а затем управлялся вашим аккордеономактивный класс 'ui-accordion-content-active'.Добавьте ниже CSS нижнюю часть вашего CSS-файла, я думаю, он будет работать для вас: 

.ui-accordion .ui-accordion-content { display:block !important; height:0; overflow:hidden;}
#accordion-section-panel.ui-accordion .ui-accordion-content { padding-top: 0!important; padding-bottom: 0!important;}
.ui-accordion .ui-accordion-content.ui-accordion-content-active { height:auto;}
#accordion-section-panel.ui-accordion .ui-accordion-content.ui-accordion-content-active { padding-top: 10px!important; padding-bottom: 10px!important;}
...