<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../Js/jquery-1.7.2.min.js"></script>
<style>
button {
width: 50px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 5px;
border: none;
outline: none;
background: darkorange;
color: #FFFFFF;
}
div {
width: 200px;
height: 100px;
background: pink;
font-size: 16px;
display: none;
}
</style>
</head>
<body>
<button>顯示</button>
<div>這是要展示的盒子</div>
</body>
<script>
$(function () {
var $btn = $('button');
var $div = $('div');
/* $btn.on('click', function (){
if($div.is(':visible')){//如果是展示的就隱藏
$div.hide();
$btn.text('展示');
}else {
$div.show();
$btn.text('隱藏');
}*/
//可用toggle方法代替
$btn.toggle(function () {
$div.show();
$btn.text('隱藏');
}, function () {
$div.hide();
$btn.text('展示');
}); }); });</script></html>
