ツリーメニュー
重要性: 5
クリックでノードの子供を表示/非表示にするツリーを作成してください。:
要件:
- イベントハンドラは1つだけ(移譲を使ってください)
- ノードタイトルの外側(空のスペース)のクリックでは何もしないようにしてください。
解決策には2つのパートがあります。
- すべてのツリーノードのタイトルを
<span>
で囲みます。私たちは、:hover
で CSS-スタイルを行い、テキストに対してクリックを正確に処理することが出来ます。なぜなら<span>
幅はちょうどテキスト幅になるためです(それがない場合と違って)。 tree
のルートノードにハンドラを設定し、<span>
タイトルのクリックを処理します。