[問題] 有時候會秀逗的js與display:block

作者: flyingmoon (路過的塔羅牌)   2019-05-24 06:46:09
各位前輩好
最近在寫一個網頁的手機版。
過去遇到選單開啟,也沒仔細想過會不會遮到下面內容
所以通常的解決方式是把選單弄得透明一點。
不過這次寫的時候,想讓選單開啟時,
整個內容往下移到不會被選單遮住,因此直觀的想法就是先設一個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
先感謝能幫看的大大<(_ _)>
作者: j355066   2019-05-24 08:20:00
van.style.display = 'block'; if跟else你都寫一樣的
作者: brianwu1201 (bunny29)   2019-05-24 08:41:00
同上,if else block 裡面都寫 display: block,這情境當然出錯。
作者: konkonchou (卡卡貓)   2019-05-25 01:09:00
=== 'none' 跟 == 'none' 是不一樣的
作者: VdustR (京)   2019-05-27 09:51:00
建議貼 codepen
作者: angty8520 (完全變態)   2019-06-23 00:52:00
用==none 就好用 == “none ” 不過可以改用新增移除class方式或是toggle方式處理

Links booklink

Contact Us: admin [ a t ] ucptt.com