2-4. 設計互動垂直折疊式面板
(1) 取得索引號碼
| 方法 | 說明 |
|---|---|
| index() | 取得指定物件在同一層相同選取器中的索引號碼 [參考][參考] |
(2) 設計互動展開呈現的折疊式面板
可以自2-2展開選單的範例另存新檔來修改
| 修改
CSS： |
|
| JS： | 使用2-2展開選單範例的JS程式碼(尚未修改)
|
| 結果： | 將/* */的註解取消再測試, 滑入即展開、滑出即收合。
|
| 改善： | 將滑入、滑出改成點選展開, 因此將jQuery程式碼改成如下圖所示
由於第一層的<li>設計成點選展開以下內容, 所以不適合連結, 因此如下圖改成<a href="javascript:;">
|
| 結果： |
|
| Q： | 如果希望已展開的選單先收合後, 再展開目前點選的選單項目
|
