[問題] 手機版的選單在電腦版還留著求解(附P幣) gdyoungboy12 PTT批踢踢實業坊

[問題] 手機版的選單在電腦版還留著求解(附P幣)

作者: gdyoungboy12 (隨遇而安) 2018-08-18 18:11:05

簡單來說就是在手機板時候開啟選單
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幣回報祝你發發發

作者: Rinorune (杜) 2018-08-18 19:03:00

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

作者: jherk 2018-08-18 20:04:00

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

作者: InfinityGate (小鳥) 2018-08-18 20:09:00

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

作者: Rinorune (杜) 2018-08-19 02:23:00

toggleClass

作者: jherk 2018-08-19 02:47:00

https://codepen.io/jherkyesse/pen/aaodvw

作者: rajaccu100 (The 花) 2018-08-19 09:35:00

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

作者: jherk 2018-08-19 13:30:00

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

作者: rajaccu100 (The 花) 2018-08-19 15:20:00

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

作者: chen5252 (鋒炮炸裂) 2018-08-20 12:13:00

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

作者: freeman371 (自由人371) 2018-08-25 16:09:00

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

繼續閱讀

[問題] 讓owl-carousel的dot保持在左方moodoa3583 [問題] 關於YAHOO廣告追蹤碼Obama5566 [問題] vscode 要怎麼導入pug和sass呢？tangerine030 [問題] 請教關於資料庫及SSL的問題Doubleband [問題] RWD逗號不能在句首的解決辦法？Whatever [問題] 要如何從C#的.cs檔拋script到前端aa12783509 [心得] (教育影片) 文組也看得懂的 - 網路爬蟲allenwang15 [問題] img屬性不加引號才能顯示??SFMAndroid [問題] 2套線上課程比較eatbook [問題] 為什麼這網頁亂碼x246libra

[問題] 手機版的選單在電腦版還留著 求解(附P幣)

[問題] 手機版的選單在電腦版還留著求解(附P幣)