[問題] 有時候會秀逗的js

看板Web_Design作者 (路過的塔羅牌)時間5年前 (2019/05/24 06:46), 5年前編輯推噓3(307)
留言10則, 5人參與, 5年前最新討論串1/1
各位前輩好 最近在寫一個網頁的手機版。 過去遇到選單開啟,也沒仔細想過會不會遮到下面內容 所以通常的解決方式是把選單弄得透明一點。 不過這次寫的時候,想讓選單開啟時, 整個內容往下移到不會被選單遮住,因此直觀的想法就是先設一個div display:none 等到去按手機的選單按鍵時,讓div display:block 因為div block了,會把原來那邊區塊的東西往下擠,就達到我想要的效果 等到再次按下選單(已變形成X樣子)按鍵,div又會再度消失 大概是這樣的感覺 因為對js不太熟,所以上網找了程式碼改完 一開始尚稱順利,還滿能推得動,但不知道為什麼現在幾乎完成時 按選單按鍵,有時候推得動,有時候變成成X,選單也跑出來, 但div根本不理我Q_Q完全沒現身或者block後,再按一次選單無法消失 不知道是js改的不夠好,哪邊有問題,還是怎麼樣,想勞煩前輩們幫忙指點 非常感謝 js的部分 <script> function change() { var hamorigin = document.getElementById('hamorigin'); var van = document.getElementById('van'); if (van.style.display === 'none') { van.style.display = 'block'; } else { van.style.display = 'none'; } } </script> html (選單按鍵) <div class="hamorigin" onclick="change()" id="hamorigin"> <div class="ham-bar ham-bar-top"></div> <div class="ham-bar ham-bar-middle"></div> <div class="ham-bar ham-bar-bottom"></div> </div> ..... (預設消失要重現的區塊) <div class="van" style="height: 300px;width: 100%;display: none;" id="van"> </div> ..... 應該不會是其他地方卡住.....吧?XD 先感謝能幫看的大大<(_ _)> -- 人為了得到什麼需要付出同等的代價 這就是等價交換的原則 那時我們曾相信這是世界的真理 可是真正的世界並不完美  並不存在可以說明一切的原則 等價交換的原則也一樣 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 112.104.183.122 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1558651575.A.316.html ※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 06:47:53 ※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 06:50:09 ※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 07:09:28 ※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 07:10:15

05/24 08:20, 5年前 , 1F
van.style.display = 'block'; if跟else你都寫一樣的
05/24 08:20, 1F

05/24 08:41, 5年前 , 2F
同上,if else block 裡面都寫 display: block,這
05/24 08:41, 2F

05/24 08:41, 5年前 , 3F
情境當然出錯。
05/24 08:41, 3F
拍謝拍謝<(_ _)> 後來自己測試時改,忘記改回來,現在修正惹 原先是none的情況下也還是如原來敘述般有時可以有時不行 所以才想上來求問 ※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 08:54:45

05/24 20:04, 5年前 , 4F
貼完整的 codepen 上來吧。還有補充一點,一般做法是
05/24 20:04, 4F

05/24 20:04, 5年前 , 5F
js 動態控制 classList。
05/24 20:04, 5F

05/25 01:09, 5年前 , 6F
=== 'none' 跟 == 'none' 是不一樣的
05/25 01:09, 6F

05/27 09:51, 5年前 , 7F
建議貼 codepen
05/27 09:51, 7F

06/23 00:52, 5年前 , 8F
用==none 就好
06/23 00:52, 8F

06/23 00:55, 5年前 , 9F
用 == “none ” 不過可以改用新增移除class方式或是
06/23 00:55, 9F

06/23 00:55, 5年前 , 10F
toggle方式處理
06/23 00:55, 10F
文章代碼(AID): #1SvoAtCM (Web_Design)
文章代碼(AID): #1SvoAtCM (Web_Design)