css 展开收起切换不同图标

CSS展开收起切换不同图标是一种常见的功能，在Web开发中被广泛应用。以下通过代码演示进行说明。

/*CSS样式*/.arrow-up {
      display: block;
      content: "";
      height: 0;
      width: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #000000;
}
.arrow-down {
      display: block;
      content: "";
      height: 0;
      width: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #000000;
}
    /*HTML代码*/a href="#" id="toggle">
    点击我收起/展开/a>
    div id="content">
      p>
    这是要被隐藏或展开的内容/p>
    /div>
    /*JavaScript代码*/var toggle = document.getElementById("toggle");
    var content = document.getElementById("content");
toggle.addEventListener("click", function() {
  if (content.style.display === "none") {
        content.style.display = "block";
        toggle.innerHTML = "点击我收起";
        toggle.appendChild(document.createTextNode(" "));
        toggle.appendChild(document.createElement("span")).className = "arrow-up";
  }
 else {
        content.style.display = "none";
        toggle.innerHTML = "点击我展开";
        toggle.appendChild(document.createTextNode(" "));
        toggle.appendChild(document.createElement("span")).className = "arrow-down";
  }
}
    );
    

以上代码实现了点击toggle元素时展开或收起content元素，并且点击时toggle元素会切换为不同的箭头图标。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！