レッスンに戻る

ツリーメニュー

重要性: 5

クリックでノードの子供を表示/非表示にするツリーを作成してください。:

要件:

  • イベントハンドラは1つだけ(移譲を使ってください)
  • ノードタイトルの外側(空の巣ペース)のクリックでは何もしないようにしてください。

タスクのためのサンドボックスを開く

解決策には2つのパートがあります。

  1. すべてのツリーノードのタイトルを <span> で囲みます。私たちは、 :hover で CSS-スタイルを行い、テキストに対してクリックを正確に処理することが出来ます。なぜなら <span> 幅はちょうどテキスト幅になるためです(それがない場合と違って)。
  2. tree のルートノードにハンドラを設定し、<span> タイトルのクリックを処理します。

サンドボックスで解答を開く