toggle()显示/隐藏的用法
生活随笔
收集整理的這篇文章主要介紹了
toggle()显示/隐藏的用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body{font-size: 13px;}
.divFrame{width: 180px;}
.divFrame .divMenu{float: left;}
.divFrame .divContent{float: right;}
.divFrame .divContent div{display: none;width: 50px;height: 50px;background: orange;}
.btn{border: solid 1px #666;padding: 2px;width: 80px;margin-bottom: 5px;}
</style>
<script type="text/javascript" src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
$(function(){
$("input:eq(0)").click(function(){ //無參數方法
$("#box").toggle();
});
$("input:eq(1)").click(function(){ //根據參數switch顯示
var intI = 0;
var blnA = intI > 1; //獲取邏輯值，這里為false
$("#box").toggle(blnA);
});
$("input:eq(2)").click(function(){ //動畫方式顯示
$("#box").toggle(3000,function(){
$(this) //以動畫方式顯示，并執行回調函數
.css({"border":"solid 1px #ccc","padding":"2px"});
});
});
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divMenu">
<input type="button" value="無參數" class="btn" id="Button1" /><br />
<input type="button" value="邏輯顯示" class="btn" id="Button2" /><br />
<input type="button" value="動畫顯示" class="btn" id="Button3" />
</div>
<div class="divContent">
<div id="box"></div>
</div>
</div>
</body>
</html>
結果如下圖所示：
形式一、無參數調用格式： toggle()
形式二、邏輯參數調用格式： toggle(switch)
參數switch為一個布爾值，即true或false。當該值為true時，顯示元素，反之隱藏。
形式三、動畫效果調用格式： toggle(speed,[callback])
與show(speed,[callback])種的參數所表示的意義是一樣的。
高否？富否？帥否？
否？
滾去學習！
總結
以上是生活随笔為你收集整理的toggle()显示/隐藏的用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 传奇HERO引擎给装备加套装属性技巧
- 下一篇： 苹果手机屏幕上的悬浮球怎么设置（iPho