csdn文章内容显示与折叠

最新推荐文章于 2025-06-21 22:14:33 发布

最新推荐文章于 2025-06-21 22:14:33 发布 · 1.3k 阅读

文章标签：

#JavaScript #ViewUI

本文介绍如何在优快云博客中实现代码的显示与折叠功能，通过 JavaScript 和 HTML 的结合使用，使得长段代码更加易于阅读。具体包括添加代码折叠按钮、设置 DIV 的 ID 和样式等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

csdn文章的显示与折叠，在编辑器中点击源视图：

1.添加自己的代码

<DIV style="BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; CURSOR: hand; BORDER-BOTTOM: 1px" onclick=toggle(this,'myContent')>+Code</DIV>
<SCRIPT type=text/javascript>
function toggle(obj,id){
    var content = document.getElementById(id);
    if(content.style.display == 'none'){
      content.style.display = 'block';
      obj.innerHTML = '-Code';
    }else{
      content.style.display = 'none';
      obj.innerHTML = '+Code';
    }
}
</SCRIPT>

2.给div添加id属性、style属性