JQuery中的toggle怎么用？一些使用分析

2016-08-02 分類：網站建設

比如：對一個按鈕的點擊事件和一個DIV的背景，點擊一次按扣子，把DIV的背景顯示為藍色，點擊第二起的時候要把DIV的
背景色改為黑色。
我們定義的HTML代碼如下：
<body>
<input type=“button”id=“btnShow”value=“Toggle”/>
<div id=“DivToggle”>此處顯示id“DivToggle”的內容</div>
</body>
定義的起初的樣子式如下：
復制代碼代碼如下：
#DivToggle {
height: 999px；
width: 999px；
margin: 50px；
background-color: #6CC；
}
在toggle（fn，fn，….）；才明白一個toggle（）的函數，主要是用來切換元素的顯示狀態。如果一個元素是顯示的，這么調用.toggle（）之后就變得隱藏了。
JQuery代碼：
復制代碼代碼如下：
<script type=“text/javascript”>
$（
function（）{
$（“#btnShow”）.click（function（event）{
$（“#DivToggle”）.toggle（）；
}）；
}
）；
</script>
點擊按鈕之后DIV隱藏，再次點擊DIV顯示，然后循環。
這里我們可以手動設置元素的顯示和隱藏，提示：toggle（true）；隱藏：toggle（false）；
我們還可以為元素的隱藏和顯示設置速度。
$（“#DivToggle”）.toggle（600）；
當然到這里我們可以想到我們經常在網頁中碰到的把鼠標移上去顯示我們，然后鼠標移開則隱藏扔的效果。
這里當然用到了一個hover（fnover，fnout）事件。我們只要把fnover，和fnout設置為以上的toggle（600）即可；

這里的fnover是鼠標移上去的事件函數，fnout是鼠標移開的事件函數。

網站名稱：JQuery中的toggle怎么用？一些使用分析
轉載源于：http://m.kartarina.com/news11/41161.html

成都網站建設公司_創新互聯，為您提供手機網站建設、網站建設、網站策劃、做網站、云服務器、定制開發

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容