问题描述
我使用脚本在点击时切换div。 问题是，div的内容不会在移动设备上显示（我尝试使用Android和iOS）。 我试图找出我做错了什么，但是我无法弄清楚。 它确实可以在台式机（Safari，Chrome等）上运行
我的剧本
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
我的HTML
<div id="newpost">
CONTENT
</div>
<input type="submit" class="btn btn-primary" style ="width: 100%;
margin-bottom: 20px" value="Click here"
onclick="this.style.display='none';toggle();" alt="Click here">
</input>
==
解
我正在使用CSS动画。 这不适用于移动设备。 所以我删除了动画，现在一切正常！
1楼
使用引导程序时，可能会设置.hidden-xs，并且无法在小屏幕上查看div。 您需要设置.visible-xs，使其在超小型设备上可见，而.visible-sm对于小型设备。
例如。
<div class="hidden-xs col-sm-3 col-md-3 col-lg-2">
// when hidden-xs class it applied, it will not be seen in small device.
</div>
要使div在小型设备中可见，您需要将其设置为
<div class= "visible-xs col-sm-3 col-md-3 col-lg-2">
// when visible-xs class it applied, it will be seen in small device
</div>
2楼
由于您似乎正在使用Bootstrap，因此有更好的方法来执行此操作。 此方法需要jQuery和bootstrap.js。
<div id="post" class="collapse">
CONTENT
</div>
<a href="#" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#post">Click here</a>