温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！
按钮显示隐藏的div层可以通过使用CSS的属性和JavaScript的事件来实现。我们可以使用CSS的display属性来控制div层的显示和隐藏。通过设置display属性为none，可以使div层隐藏起来，设置为block则可以使其显示出来。
下面是一个示例代码，通过点击按钮来显示或隐藏div层：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
display: none;
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="myDiv">
This is a hidden div.
</div>
<script>
function toggleDiv() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</body>
</html>
在上面的示例中，我们首先定义了一个id为myDiv的div层，并设置其display属性为none，即初始状态下是隐藏的。然后在按钮的onclick事件中调用了toggleDiv()函数。
toggleDiv()函数首先通过document.getElementById()方法获取到myDiv元素，并将其赋值给变量div。然后通过判断div.style.display的值来确定当前div层的显示状态。如果display属性的值为"none"，则将其设置为"block"，使div层显示出来；否则，将其设置为"none"，使div层隐藏起来。
通过这种方式，我们可以通过点击按钮来切换div层的显示和隐藏状态。
除了使用CSS的display属性外，我们还可以使用其他的CSS属性来实现按钮显示隐藏的效果。例如，可以使用opacity属性来控制div层的透明度，通过设置opacity为0可以使div层隐藏，设置为1则可以使其显示出来。还可以使用visibility属性来控制div层的可见性，通过设置visibility为hidden可以使div层隐藏，设置为visible则可以使其显示出来。
需要注意的是，以上示例中使用了内联样式和内联事件处理函数来实现简单的效果。在实际开发中，推荐将样式和脚本代码分离到外部文件中，以提高代码的可维护性和复用性。
通过使用CSS的属性和JavaScript的事件，我们可以实现按钮显示隐藏的div层效果。这种技术在网页开发中经常被使用，可以用于实现折叠菜单、弹出框等交互效果。
