1

我刚刚用谷歌 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');
});

编辑：我尝试使用此代码：

#slideout #label {
    position: absolute;
    left: 90px;
}
#slideout {
    position: relative;
}

但是发生的情况是，标签在正确的位置，但它被切断并且不可见。

4

5 回答 5

2

position:fixed 在移动设备上是不可预测的，你应该可以通过切换到 position:relative 来修复它；即使这可能很困难。这里有一些不错的报道：http ://www.quirksmode.org/blog/archives/2012/10/budding_consens.html

于 2013-01-28T22:47:05.970 回答
1

查看幻灯片面板的不透明度属性。

隐藏面板时将不透明度设置为 0.3，标签在面板内，因此它也会消失。

但看起来 chrome mobile 和 opacity 属性存在一些问题。按钮完全消失。您应该尝试将其放在面板之外。当我禁用 chrome 检查器中滑动面板的 opacity : 0.3 时，会出现标签。

我认为你应该对此进行调查。

于 2013-02-02T17:49:31.690 回答
0

除了您拥有的之外，请尝试以下操作：

#slideout {
    position: relative;
}
#slideout #label {
    position: absolute;
    top: 46%;
    right: -10px; (approximate)
}

显然，这些是一对夫妇的替代品，因此您可以自行决定整合它们。另外，删除浮动：对；

于 2013-02-01T03:19:23.500 回答
0

这只是一个猜测，但问题可能来自 javascript 事件处理，这在移动设备上是不同的，因为事件实际上是不同的。我猜点击事件在移动设备上被触发了两次，比如“触摸”或“鼠标按下”，因此，事件发生了两次，toggleClass() 添加和删除了想要的类。因此，要么您使用 javascript 检测移动设备以添加正确的事件 检测移动浏览器（检测移动设备） jQuery 移动设备（单击事件）（适当事件），要么您使用计时器更改“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
   }
});

希望这可以帮助。

于 2013-02-01T15:03:28.170 回答
0

在你的 CSS 中使用postion:fixed以及相应的 width-height 属性。

于 2013-02-01T18:25:51.100 回答