我刚用Google Chrome桌面和移动版测试了我的网站,看起来幻灯片菜单的标签没有显示。它确实有效,它只是没有显示,我不明白为什么。改变位置在这里不起作用,因为我使用的滑出式设计依赖于位置,我需要它们为fixed
。
网址:http://hunpony.hu/today/en/
相关CSS:(full 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');
});
屏幕截图:
编辑:我尝试使用此代码:
#slideout #label {
position: absolute;
left: 90px;
}
#slideout {
position: relative;
}
但是会发生什么,标签位于正确的位置,但它被切断并且不可见。
答案 0 :(得分:1)
位置:固定在移动设备上是不可预测的,您应该能够通过切换到position:relative;来修复它。即使这可能很难。这里有一些不错的报道:http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html
答案 1 :(得分:1)
查看幻灯片面板的opacity属性。
隐藏面板时,您将不透明度设置为0.3,您的标签位于面板内,因此它也会消失。
但看起来Chrome mobile和opacity属性存在一些问题。按钮完全消失。您应该尝试将其放在面板之外。当我在chrome检查器中禁用不透明度:0.3的滑动面板时,会出现标签。
我认为你应该对此进行调查。
答案 2 :(得分:0)
除了您拥有的内容外,请尝试以下操作:
#slideout {
position: relative;
}
#slideout #label {
position: absolute;
top: 46%;
right: -10px; (approximate)
}
显然,对于一对夫妇来说,这些是最重要的,因此请根据自己的判断进行整合。另外,删除float:right;
答案 3 :(得分:0)
这只是猜测,但问题可能来自javascript事件处理,这在移动设备上是不同的,因为事件实际上是不同的。我想点击事件在移动设备上被触发两次,比如“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
}
});
希望这有帮助。
答案 4 :(得分:0)
在你的css中使用 position:fixed 以及相应的width-height属性。