JavaScript用于在折叠图标展开和折叠时切换图标

的功能可以通过以下方式实现：

首先，需要在HTML中定义一个用于展示折叠状态的图标元素，例如一个<span>标签：

<span id="collapse-icon">+</span>

接下来，在JavaScript中获取该图标元素的引用，并为其添加点击事件监听器：

var icon = document.getElementById("collapse-icon");
icon.addEventListener("click", toggleCollapse);

在点击事件处理函数toggleCollapse中，可以通过修改图标元素的内容或样式来实现展开和折叠时的图标切换。例如，可以使用CSS类来切换不同的图标样式：

function toggleCollapse() {
  if (icon.classList.contains("collapsed")) {
    icon.classList.remove("collapsed");
    icon.textContent = "-";
    // 执行展开操作
  } else {
    icon.classList.add("collapsed");
    icon.textContent = "+";
    // 执行折叠操作
  }
}

最后，根据具体的需求，在展开和折叠操作中执行相应的逻辑。例如，可以使用CSS样式来控制折叠内容的显示与隐藏：

function toggleCollapse() {
  if (icon.classList.contains("collapsed")) {
    icon.classList.remove("collapsed");
    icon.textContent = "-";
    // 展开折叠内容
    document.getElementById("collapse-content").style.display = "block";
  } else {
    icon.classList.add("collapsed");
    icon.textContent = "+";
    // 折叠内容
    document.getElementById("collapse-content").style.display = "none";
  }
}

这样，当点击折叠图标时，就会触发切换图标样式和展开/折叠操作。请注意，上述代码中的"collapse-content"是一个示例，表示需要展开/折叠的内容区域的ID，具体应根据实际情况进行修改。

推荐的腾讯云相关产品：无

参考链接：