DIV+CSS+Javascript 做折叠联动效果

最新推荐文章于 2026-05-04 12:11:16 发布

原创最新推荐文章于 2026-05-04 12:11:16 发布 · 3.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用JavaScript实现的折叠面板效果，通过点击标题来控制内容的显示与隐藏。主要利用DOM操作更改div元素的display属性，实现了简洁的折叠功能，并通过图片切换提供直观的反馈。

做一个显示区域，可以通过点击标题来折叠或展开其中的内容，

主要的做法是通过 javascript 来修改 div 区域的 display 值来达到展开和折叠的视觉效果。

具体代码中最重要的就是:

// 显示某区域

document.getElementById("div"+num).style.display = "block";

// 隐藏某区域

document.getElementById("div"+num).style.display = "none";

control1

control2

control3

代码如下:

if (document.getElementById("div"+num).style.display == "none") {
  document.getElementById("div"+num).style.display = "block";
  document.getElementById("imgcon"+num).src = "images/toggle-collapse-dark.png";
} else {
  document.getElementById("div"+num).style.display = "none";
  document.getElementById("imgcon"+num).src = "images/toggle-expand-dark.png";
}
}

-->
</script>

</head>
<body>
<image id="imgcon1" src="images/toggle-expand-dark.png" style="float:left;" onClick="disp(1)"/>
<div id="divcon1" onClick="javascript:disp(1)" style="float:left;">control1</div>
<br>
<div id="div1" style="display:none;position:relative;left:15px;">
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
<li>line4</li>
<li>line5</li>
</ul>
</div>

<image id="imgcon2" src="images/toggle-expand-dark.png" style="float:left;" onClick="disp(2)"/>
<div id="divcon2" onClick="javascript:disp(2)" style="float:left;">control2</div>
<br>
<div id="div2" style="display:none;position:relative;left:15px;">div2</div>

<image id="imgcon3" src="images/toggle-expand-dark.png" style="float:left;" onClick="disp(3)"/>
<div id="divcon3" onClick="javascript:disp(3)" style="float:left;">control3</div>
<br>
<div id="div3" style="display:none;position:relative;left:15px;">div3</div>

上面的javascript 代码中，还涉及到了折叠图形的替换。

document.getElementById("imgcon"+num).src = "images/toggle-collapse-dark.png";

标签