使用 jQuery 選擇器獲取頁面元素，然後利用 jQuery 物件的 css() 方法設定其 display 樣式屬性，從而實現顯示和隱藏效果。

檢視本章節

檢視作業目錄

---

需求說明：

1. 使用 jQuery 選擇器獲取頁面元素，然後利用 jQuery 物件的 css() 方法設定其 display 樣式屬性，從而實現顯示和隱藏效果。
2. 具體要求如下：

• 在頁面中顯示電影排行榜
• 當單擊“（收起）”連結時，排行榜中後三項的電影名稱隱藏而且連結的文字更改為“（展開）
• ” 當單擊“（展開）”的連結時，後三項的電影名稱重新顯示且連結的文字更改為“（收起）”

實現思路：

1. 新建 HTML 頁面，使用 <h3> 和 <ul> 等標籤製作頁面載入時的初始效果
2. 在頁面載入完畢事件中，給 <a href="#">（收起）</a> 標籤的單擊事件繫結方法
3. 在 <a> 標籤的點選事件方法中判斷無序列表的後三項是否可見。若可見，利用 css() 方法把後三項的display 屬性設定成“none”，再利用 text() 方法，改變 <a> 標籤的文字為“展開”；若不可見，利用 css() 方法把後三項的 display 屬性設定成“list-item”，再利用 text() 方法，改變 <a> 標籤的文字為“收起”

實現程式碼：