CSS Counter 在 Chrome 中使用 slidetoggle 给出错误的编号

Posted 2023-02-25

【中文标题】CSS Counter 在 Chrome 中使用 slidetoggle 给出错误的编号

【英文标题】：CSS Counter is giving wrong numbering in Chrome with slidetoggle

【发布时间】：2018-05-18 12:50:55

【问题描述】：

描述：- 计数器在滑动切换时有争议地递增。它给了 ol 之外的 li 有争议的数字。问题出现在 chrome 中，并且在 Mozilla 中运行良好。那么有什么解决办法呢？ 我在底部附加了输出文件。

<ol class="nav">
    <li>
        <a href="#">Parent-1</a>
        <ol class="nav">
            <li>child1</li>
            <li>child2</li>
        </ol>
    </li>
    <li><a href="#">parent-2</a>
     <ol class="nav">
            <li>
            <a href="#">child-1</a>
            <ol class="nav">
              <li><a href="#">inner-most-1</a></li>
            <li><a href="#">innner-most-2</a></li>
            </ol>

            </li>
            <li><a href="#">child-2</a></li>
        </ol>
    </li>
    <li><a href="#">parent-3</a></li>
</ol>

jQuery

$(function() 
    $(".nav ol").hide();
        $(".nav > li > a").click(function(e) 
            $(this).siblings("ol").slideToggle();
            e.preventDefault();
        );
    );

CSS:-

  ol
       counter-reset: section;
       list-style-type: none;
        
     ol li
       counter-increment: section;
        
     ol li:before 

     content: counters(section,".") " ";
      

OTPUT looks like Output -2

JS_Fiddle:- https://jsfiddle.net/tushar115/f6zvu8w5/10/

【参考方案1】：

这是 Chrome 中的一个错误：https://bugs.chromium.org/p/chromium/issues/detail?id=822260 我认为唯一的解决方案是让 Google 解决这个问题。否则，有人将不得不重新创建编号列表的全部功能。