event -- 做一個樹 · 前端知識 -- 學習整理

>[success] # 做一個樹 ![](https://img.kancloud.cn/f8/6e/f86e1048a0814f71446a2973938ae32b_424x307.png) * 說明：下面案例中可以發現并沒有給每一個li 都綁定事件，先對時候用了事件冒泡，只給ul進行綁定，然后來進行展開收起邏輯 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>樹UI</title> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } ul { list-style: none; } .tree li::before { color: #999; content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 10.4px; border-color: transparent; border-left-color: currentColor; transform: translateX(6px); } .tree li.expand::before { transform: rotate(90deg) translateX(6px); } .tree li > ul { display: none; } .tree li.expand > ul { display: block; } </style> </head> <body> <ul class="tree"> <li>項目1</li> <li>項目2</li> <li class="expand"> 項目3 <ul> <li>子項3.1</li> <li>子項3.2</li> <li>子項3.3</li> </ul> </li> <li> 項目4 <ul> <li>子項4.1</li> <li>子項4.2</li> </ul> </li> <li>項目5</li> </ul> </body> <script> const liDom = document.querySelector('.tree') liDom.addEventListener('click', (evt) => { console.log(evt.target.tagName) if (evt.target.tagName === 'LI') { evt.target.classList.toggle('expand') } }) </script> </html> ~~~