簡單來說就是在手機板時候開啟選單
https://i.imgur.com/52potAK.png
但此時視窗往外拉 造裡說 應該選單會消失 但似乎還留著HTML的文字
https://i.imgur.com/XGTgrSH.png
雖然再點一下 就會消失(因為手機板的選單 點旁邊會消失) 但這不是我要的RR~~~
當然是希望手機板的選單 在電腦版的視窗可以直接消失
但是我打display:none 似乎沒用 只能把CSS清除 但HTML卻莫名留著
codepen的連結:
https://codepen.io/WeiLin/pen/QBeXgY
懇請高手解惑 確定解決的第一位朋友附上888P幣回報 祝你發發發

開f12看阿 這裡的display:none被蓋過了

因為你用jquery的fadeToggle()他會在html裡加入inline style=“display:block”他的權域高於css所以會顯示block 你可以用更高權域的!important去覆蓋inline style改成#phone_menu{ display: none !important }

最好還是自己寫class去處理動畫

toggleClass

監聽resize事件，視窗寬大於時fadeout()

https://codepen.io/jherkyesse/pen/JaPEeW.active添加media屬性 小於npx時才顯示 樣式的東西還是交給css處理 建議讓js只負責邏輯運算和交互動態

因為fadeToggle是加style的display屬性在標籤內，會蓋掉CSS。所以用jQ動畫的話就得寫在JS裡。也可以改用CSS寫動畫，用CSS管控樣式。BTW你CSS斷點是設在980px，所以width>1000時才會有閃一下的問題。假如得寫在JS的話，CSS和JS兩邊斷點要確保相同(你的case是980px)

css用media screen設定指定最小(大)寬度，就不用寫js囉

當按下按鈕時觸發js的click事件，並用js增添顯示選單的class，此時加入media screen來讓css判斷menu是否該在這視窗的size下顯示