天天看點

jquery内容顯示與隐藏; toggle()使用

jquery中的toggle()方法可切換元素的可見狀态,使用toggle()方法切換元素狀态就無需判斷元素是顯示還是隐藏狀态,該方法可自動判斷元素的狀态。

代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>jq點選隐藏與顯示</title>

<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>

<script type="text/javascript">

$(function(){

$(".btn").click(function(){

$(".toggle").toggle();//顯示時點選為隐藏,隐藏時點選為顯示

if($(this).val() == "隐藏"){//修改按鈕提示文字

$(this).val("顯示")

}else{

$(this).val("隐藏")

}

})

})

</script>

</head>

<body>

<input type="button" value="隐藏" class="btn"/>

<div class="toggle">

大家好,我是toogle()!

</div>

</body>

</html>