作者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/cn.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