制作＆＃34;反向增量＆＃34;隐藏onclick？

Question

是否可以使counter-increment无法显示并且能够在counter-increment属性上打开和关闭？例如，请参阅附带的代码。谢谢！

Fiddle

＆＃13;

＆＃13;

body{
    counter-reset:chapter;
}

h2{
    counter-reset:topic;
}

h2:before{
    counter-increment:chapter;
    content:counter(chapter) ". ";
}

h4:before {
    counter-increment:topic;
    content:counter(chapter) "." counter(topic) " ";
}

＆＃13;

<button>
Toggle On/Off Counter Increment Property
</button>

<h2>Paragraph</h2>
<h4>
   Sentence
</h4>
<h4>
    Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
  Sentence
</h4>

＆＃13;

＆＃13;

＆＃13;

Answer 1

基本上你可以重置：在规则之前：

button:focus ~ :before {content:'';/* erase counter */}
button:focus {pointer-events:none; /* to toggle focus */}

基本代码段CSS示例，用于显示（或小提琴https://jsfiddle.net/Lcbdxhk5/1/ +切换：https://jsfiddle.net/Lcbdxhk5/3/）：

的想法

body {
  counter-reset: chapter;
}

h2 {
  counter-reset: topic;
}

h2:before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
}

h4:before {
  counter-increment: topic;
  content: counter(chapter) "." counter(topic) " ";
}

button:focus ~:before {
  content: '';
}
button:focus {pointer-events:none; /* to toggle focus */}

<button>
  Toggle On/Off Counter Increment Property
</button>

<h2>Paragraph</h2>
<h4>
   Sentence
</h4>
<h4>
    Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
   Sentence
</h4>
<h4>
  Sentence
</h4>

通过js / jQuery，只需使用toggle() jQuery fonction添加/删除类