ul列表display不同值显示对比实例页面

CSS代码：

li:nth-child(n+4) {
	display: none;
}

HTML代码：

<h4>display:block显示</h4>
<ul id="ul">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>
<p><button id="b1">更多</button></p>

<h4>display:revert显示</h4>
<ul id="ul2">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>
<p><button id="b2">更多</button></p>

JS代码：

b1.onclick = function () {
    ul.querySelectorAll('li').forEach(li => {
        if (li.clientWidth == 0) {
            li.style.display = 'block';
        }
    });
    
};
b2.onclick = function () {
    ul2.querySelectorAll('li').forEach(li => {
        if (li.clientWidth == 0) {
            li.style.display = 'revert';
        }
    });
};