返回課程

樹狀選單

重要性:5

建立一個樹狀結構,讓使用者可以按一下來顯示/隱藏節點子節點

需求

  • 只有一個事件處理常式(使用委派)
  • 按一下節點標題以外的地方(空白處)不應執行任何動作。

開啟一個沙盒來進行這項任務。

解決方案分為兩部分。

  1. 將每個樹狀節點標題包覆在 <span> 中。然後,我們可以在 :hover 上使用 CSS 樣式,並準確處理文字上的按一下動作,因為 <span> 的寬度與文字寬度相同(與不使用 <span> 的情況不同)。
  2. 將處理常式設定為 tree 根節點,並處理 <span> 標題上的按一下動作。

在沙盒中開啟解決方案。