我刚刚用Google Chrome桌面版和移动版测试了我的网站,似乎没有显示滑出菜单的标签。它确实有效,只是没有显示,我也不知道为什么。更改位置在这里不起作用,因为我使用的滑出式设计依赖于位置,因此我需要将它们设为fixed
。
相关CSS:
#slideout #label {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
display:block;
float:right;
margin:46% 0 0 0;
padding: 0 2px 6px 2px;
font-size: 20px;
position: fixed;
left:-36px;
-webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
background-color:#fff;
border-bottom:0 !important;
border-radius:8px 8px 0 0;
}
#slideout.opened #label {
left: 86px;
}
JavaScript:
$('#label').on('click',function(){
$('#slideout').toggleClass('opened');
});
EDIT:我尝试使用此代码:
#slideout #label {
position: absolute;
left: 90px;
}
#slideout {
position: relative;
}
但是发生的是,标签在正确的位置,但是它被切除并且不可见。
查看幻灯片面板的不透明度属性。
隐藏面板时,将不透明度设置为0.3,标签位于面板内部,因此它也会褪色。
但是看起来chrome移动版和不透明度属性存在问题。该按钮完全消失。您应该尝试将其放在面板之外。当我禁用chrome inspector中的滑动面板的不透明度:0.3时,将显示标签。
我认为您应该对此进行调查。
position:fixed在移动设备上是不可预测的,您应该可以通过切换到position:relative;来解决它。即使那可能很困难。这里有一些不错的报道:http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html
除了您拥有的以外,请尝试以下操作:
#slideout {
position: relative;
}
#slideout #label {
position: absolute;
top: 46%;
right: -10px; (approximate)
}
很明显,这些是一对夫妇的替代,因此请自行决定将其集成。另外,删除浮点数:right;
这只是一个猜测,但问题可能出在javascript事件处理上,这在移动设备上有所不同,因为事件实际上是不同的。我猜想click事件在移动设备上被触发了两次,例如“ touch”或“ mousedown”,因此,该事件发生了两次,toggleClass()添加并删除了所需的类。因此,您可以使用javascript检测移动设备以添加正确的事件Detecting a mobile browser(检测手机)jQuery mobile (click event)(适当的事件)或者,您可以使用计时器更改“ addClass”和“ removeClass”的切换类。有点像
var animating = false;
var open = false;
$('#label').on('click',function(){
if (!animating) {
animating = true;
if (open) {
$('#slideout').removeClass('opened');
} else {
$('#slideout').addClass('opened');
}
setTimeout(function() { animating = false }, 500); // 500 = 0.5s of css animation
}
});
希望这会有所帮助。
在您的CSS中使用postion:fixed以及相应的width-height属性。