0

我正在疯狂地试图理解为什么我的 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 以确保它最后加载。

PS我还在Divi（构建器）模块中加载了手风琴，但不确定这是否归因于问题。

任何意见，将不胜感激。

此致

4

1 回答 1

1

我认为您的代码很好，但它没有按预期工作，因为如果元素本身或容器不可见，CSS 计数器会忽略该元素"display:none"。默认情况下，您的手风琴的每个部分都是“显示：无”，除了活动部分。当您激活另一个时，当前一个将显示为“显示：无”。所以 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;}
于 2018-10-16T02:45:05.030 回答