Javascript 如何在移动设备上右击切换我的菜单？

下面是我的简单菜单：当我在手机上打开时，我希望它在默认情况下关闭，如果我从右向左切换，它应该打开

@导入url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
@导入url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.手风琴{
颜色：#FFF；
宽度：100%；
}
.手风琴节{
宽度：100%；
}
.accordio.section输入[type='radio']{
显示：无；
}
.accordio.section输入[type='radio']：选中+标签{
背景#3636；
}
.accordio.section输入[type='radio']：选中+标签：之前{
内容：“；
位置：绝对位置；
左边框：3px实心#21CCFC；
身高：100%；
左：0；
}
.accordio.section输入[type='radio']：选中~.content{
最大高度：300px；
不透明度：1；
z指数：10；
溢出y：自动；
}
.手风琴.剖面标签{
位置：相对位置；
光标：指针；
填充：10px 20px；
显示：表格；
背景：#222；
宽度：100%；
-webkit过渡：背景0.3s轻松输入输出；
-moz转换：背景0.3s轻松输入输出；
-ms转换：背景0.3s轻松输入输出；
过渡：背景0.3s缓进缓出；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}
.手风琴.章节标签：前{
内容：“；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
高度：1px；
边框顶部：1px实心#3636；
}
.手风琴.剖面标签：悬停{
背景#3636；
}
.手风琴.剖面标签跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}
.手风琴节：最后一个类型{
边框底部：1px实心#3636；
}
.手风琴.章节.内容{
最大高度：0；
-webkit转换：所有0.4s；
-moz转换：全部为0.4s；
-ms转换：所有0.4s；
过渡：全部为0.4s；
不透明度：0；
位置：相对位置；
溢出y：隐藏；
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
背景:#666；
字体系列：“流沙”，无衬线；
}
.左菜单{
背景：#222；
宽度：200px；
位置：绝对位置；
排名：0；
底部：0；
}
.手风琴{
字体大小：14px；
}
.手风琴.章节.内容{
填充：0 15px；
}
.accordio.section输入[type='radio']{
显示：无；
}
.accordio.section输入[type='radio']：选中~.content{
填充：15px；
}
保险商实验室{
宽度：100%；
填充：0；
保证金：0；
列表样式：无；
}
ulli{
填充：10px；
}
ulli i{
字体大小：13px；
宽度：15px；
右边距：15px；
}
ulli：悬停{
光标：指针；
}
ul li：悬停i{
颜色：#21CCFC；
}
.标志{
填充：30px 10px；
宽度：200px；
文本对齐：居中；
颜色：#FFF；
字体大小：20px；
}
.标志一{
字体大小：70px；
颜色：#21CCFC；
}

纯CSS手风琴导航
纯CSS手风琴导航
信息

收件箱
发送
档案馆

用法

系统
使用者
探访

卷轴

需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗
需要咖啡吗

第四节