如何在列表打开或关闭时添加减号图标？

在前端开发中，可以通过使用CSS和JavaScript来实现在列表打开或关闭时添加减号图标的效果。

一种常见的实现方式是使用CSS中的伪类选择器和背景图来实现图标的切换。首先，为列表项的父元素添加一个类名，例如"expandable"，然后使用CSS选择器来选中该类名下的子元素，设置背景图为加号图标。当列表项被展开时，通过修改父元素的类名为"expanded"，再使用CSS选择器选中该类名下的子元素，设置背景图为减号图标。

示例代码如下：

HTML:

<ul class="expandable">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

CSS:

.expandable > li:before {
  content: "+";
  background-image: url(加号图标路径);
  background-repeat: no-repeat;
  background-position: center;
  padding-right: 10px;
}

.expanded > li:before {
  content: "-";
  background-image: url(减号图标路径);
}

JavaScript:

var expandableList = document.querySelector('.expandable');
expandableList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.parentNode.classList.toggle('expanded');
  }
});

上述代码中，通过监听列表的点击事件，当点击列表项时，切换父元素的类名，从而改变图标的显示。

这种方式可以适用于各种类型的列表，例如导航菜单、折叠面板等。同时，可以根据实际需求自定义图标样式和动画效果。

腾讯云相关产品推荐：腾讯云云服务器（CVM），提供稳定可靠的云服务器实例，适用于各种应用场景。产品介绍链接：https://cloud.tencent.com/product/cvm