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

Question

说明：- 计数器在滑动切换时有争议地递增。它给了 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 看起来像 输出 -2

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

Answer 1

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