的功能可以通过以下方式实现:
<span>
标签:<span id="collapse-icon">+</span>
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 = "+";
// 执行折叠操作
}
}
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,具体应根据实际情况进行修改。
推荐的腾讯云相关产品:无
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云