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 looks like Output -2

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

Answer 1

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

CSS Counter使用slidetoggle在Chrome中提供错误的编号

1 个答案: