這是一個例子：
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="https://code.jquery.com/jquery-1.11.3.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
$(document).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.btn1</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).click(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">p</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).toggle(); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示</span>
<span style="background-color: #f5f5f5; color: #000000;"> });
$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.btn2</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).toggle(</span><span style="background-color: #f5f5f5; color: #000000;">2000</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.div2</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).toggle(); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">callback</span>
<span style="background-color: #f5f5f5; color: #000000;"> });
});
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This is a paragraph.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn1"</span><span style="color: #0000ff;">></span>Toggle<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn2"</span><span style="color: #0000ff;">></span>Toggle2<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></span>http://www.cnblogs.com/sosoft/<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div2"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none"</span><span style="color: #0000ff;">></span>柔成<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>登入後複製
範例中所用到的toggle()方法：
toggle() 方法切換元素的可見狀態。 如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。 文法$(selector).toggle(speed,callback,switch)
|
參數
|
描述
|
|
speed
|
可選。規定元素從可見到隱藏的速度（或相反）。預設為 "0"。
可能的值：
- 毫秒 （如 1500）
- "slow"
- "normal"
- "fast"
在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。
如果設定此參數，則無法使用 switch 參數。
|
|
callback
|
可選。 toggle 函數執行完後，要執行的函數。
如需學習更多關於 callback 的內容，請造訪我們的 jQuery Callback 這一章。
除非設定了 speed 參數，否則不能設定該參數。
|
|
switch
|
可選。布林值。規定 toggle 是否隱藏或顯示所有被選元素。
- True - 顯示所有元素
- False - 隱藏所有元素
如果設定此參數，則無法使用 speed 和 callback 參數。
|
PS：此效果適用於透過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。
