通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。
代码如下：
方法一：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#div1").toggle();
});
});
</script>
</head>
<body>
<h3>点击按钮显示或隐藏Div块</h3>
<button type="button">按钮</button>
<div id="div1" style="border:2px solid #ff0000">
再点击一下按钮我就会隐藏起来.
</div>
</body>
</html>方法二：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function showOrHide(){
var div = $("#div1").get(0);
if(div.style.display == ""){
div.style.display = "none";
}else{
div.style.display = "";
}
}
</script>
</head>
<body>
<h3>点击按钮显示或隐藏Div块</h3>
<button onclick="showOrHide()" type="button">按钮</button>
<div id="div1" style="display: none;border:2px solid #ff0000;">
再点击一下按钮我就会隐藏起来.
</div>
</body>
</html>效果如下：
