jQuery ui 手风琴子 css-counter 被覆盖

Question

我正在疯狂地试图理解为什么我的 CSS 计数器在 jQuery UI Accordion 中被覆盖。

我有部分，在这些部分中，我有不同数量的 Ul > LI。 我将计数器重置应用于主体标签，并将增量设置为分配给 LI 内的 SPAN TAG 的类。

当我展开部分时，我看到数字在增加，但是当动画完成时，每个部分的数字从 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 以确保它最后加载。

附：我还在 Divi (builder) 模块中加载了手风琴，但不确定这是否归因于问题。

任何建议将不胜感激。

最好的问候

Answer 1

我认为您的代码很好，但它没有按预期工作，因为如果元素本身或容器被 "display:none" 不可见，CSS 计数器会忽略该元素。默认情况下，您的手风琴的每个部分都是“显示：无”，除了活动的部分。当您激活另一个时，当前一个将显示为“显示：无”。所以 counter 只计算活动部分而忽略其他部分。

解决方案：

您需要默认保留每个部分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;}