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

Question

我正在疯狂地试图理解为什么我的 CSS 计数器在 jQuery UI 手风琴中是 over-ridden。

我有部分，在部分中，我有不同数量的 Ul > LI。我将 counter-reset 应用于正文标签，并将增量设置为 class 分配给 LIs 内的 SPAN 标签。

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

P.S。我还在 Divi（生成器）模块中加载了手风琴，但不确定是否是问题所在。

如有任何建议，我们将不胜感激。

此致

Answer 1

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

解法：

你需要你的每个部分保持默认 display:block 无论如何然后通过你的手风琴活动管理 class '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;}

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

jQuery ui accordion child css-counter being overridden

css

jquery

accordion

css-counter