作者flyingmoon (路過的塔羅牌)
看板Web_Design
標題[問題] 有時候會秀逗的js
時間Fri May 24 06:46:09 2019
各位前輩好
最近在寫一個網頁的手機版。
過去遇到選單開啟，也沒仔細想過會不會遮到下面內容
所以通常的解決方式是把選單弄得透明一點。
不過這次寫的時候，想讓選單開啟時，
整個內容往下移到不會被選單遮住，因此直觀的想法就是先設一個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://webptt.com/m.aspx?n=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
1F：→ j355066: van.style.display = 'block'; if跟else你都寫一樣的 05/24 08:20
2F：→ brianwu1201: 同上，if else block 裡面都寫 display: block，這 05/24 08:41
3F：→ brianwu1201: 情境當然出錯。 05/24 08:41
拍謝拍謝<(_ _)>
後來自己測試時改，忘記改回來，現在修正惹
原先是none的情況下也還是如原來敘述般有時可以有時不行
所以才想上來求問
※ 編輯: flyingmoon (112.104.183.122), 05/24/2019 08:54:45
4F：→ brianwu1201: 貼完整的 codepen 上來吧。還有補充一點，一般做法是 05/24 20:04
5F：→ brianwu1201: js 動態控制 classList。 05/24 20:04
6F：→ konkonchou: === 'none' 跟 == 'none' 是不一樣的 05/25 01:09
7F：推 VdustR: 建議貼 codepen 05/27 09:51
8F：推 angty8520: 用==none 就好 06/23 00:52
9F：推 angty8520: 用 == “none ” 不過可以改用新增移除class方式或是 06/23 00:55
10F：→ angty8520: toggle方式處理 06/23 00:55