[问题] 有时候会秀逗的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