JavaScript结合CSS样式实现可折叠区域的例子

来源：互联网发布：巨人网络薪资编辑：程序博客网时间：2024/04/26 06:59

这里介绍一个比较简单的办法，就是使用css的display属性。当display设置为none时，元素就会从页面流里被移除。

演示代码如下：

<html> <head> <title>Style Example</title> <script type="text/javascript"> function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } </script> </head> <body> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent1')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent1">This is some content to show and hide.</div> <p> </p> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent2">This is some content to show and hide.</div> </body></html>