Question

我已经使用css和jquery编写了自己的推送菜单。

问题是，在触摸设备上，您可以拖动＆＃39; .wrapper离开了，当它打开时它与导航元素重叠 - 它看起来很糟糕！

我如何防止这种情况发生？我不希望.wrapper成为位置：固定。

这是我的小提琴：http://jsfiddle.net/danieljoseph/cL0ej1v3/1/

这是jquery：

$("#menuToggle").click(function() {
$('.wrapper, header, nav').toggleClass('push');
});

$("nav a").click(function(){
setTimeout(function(){
        $(".wrapper,header,nav").removeClass('push');
},1000);
});

$(".wrap").click(function(){
$(".wrapper,header,nav").removeClass('push');
});

这是css：

body {
margin:0;
padding:0;
overflow-x:hidden;
}
.wrapper {
position:relative;
float:left;
width:100%;
height:100%;
z-index:0;
top:0;
left:0;
overflow-x:hidden;
background:#000;
transition:all 1s ease;
-ms-transition:all 1s ease;
-webkit-transition:all 1s ease;
}
header {
position:fixed;
z-index:10;
float:left;
width:100%;
background:#F00;
border-bottom:solid 1px #CCC;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
height:60px;
}
nav {
position:fixed;
margin-left:-200px;
left:0;
top:0;
z-index:0;
width:200px;
height:100%;
float:left;
color:#fff;
background:#030e17;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
nav a {
display:block;
}
#content {
width:100%;
height:30000px;
}
#menuToggle {
width:50px;
height:50px;
background:#0cff00;
cursor:pointer;
}
.push {
left:200px;
}

如果您需要更多详细信息，请与我们联系。：）

Answer 1

你可以用CSS来做，只是把溢出：隐藏在身上......

你也可以使用下面的JS来禁用touchmove事件：

JS：

$(window).bind(
   'touchmove',
   function(e) {
   e.preventDefault();
   }
);

防止元素被拖动到触摸设备上

1 个答案: