# JS30-Day26 Stripte Follow Along Dropdown by six [課程影片](https://www.youtube.com/watch?v=GvuWJSXYQDU&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=26) [demo](https://codepen.io/sixwings/pen/zYwJVMM) --- 先看一下成果 --- 元素說明 - .cool > li 畫面中的三個選單 - .dropdownBackground 畫面中跑來跑去的白色背景 - span.arrow 白色角角 - li > .dropdown 下拉式選單 - nav 上一層的選單，後面會用到 --- 呈現效果的 class - .trigger-enter .dropdown 第一階段的下拉式選單 - .trigger-enter-active .dropdown 第二階段的下拉式選單 - .dropdownBackground.open 「被你發現了」的白色背景 > < --- 一言不合就 live coding --- 絕對不是小抄的提示 - 掛事件監聽 - 內容隱藏，兩階段 - 背景顯示隱藏，動態調整大小 - 修正跑版, nav --- 遺珠 - 可以用事件委派嗎？ - mouseover mouseout 和 mouseenter mouseleave 差在哪裡？ - scrollTop, offsetTop ... 還是搞不懂QQ --- 觸控螢幕的時代，我們還需要新的工具 - [觸控事件 - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Touch_events) - [Hammer.JS](http://hammerjs.github.io/) - [Touch.js](https://allcky.github.io/touchjs/) --- 謝謝縮看 ❄