Javascript 在移动版中单击body时关闭侧边栏菜单

我的这段代码在桌面版上运行得非常好。打开sidenav div（在主体中）后，在外部单击它时，它将关闭sidenav div

我应该如何使其在移动版本中工作？它似乎无法识别javascript。有人能帮忙吗

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； } $（'body'）。在（'click'，function（）上{ if（parseInt（$（'#mySidenav'）.css（'width'））>0）{ closeNav（）； } });

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开
打开菜单后，单击此处的主体区域以关闭菜单。然而，
它不适用于移动版本
 

请尝试一下，并告诉我它是否适合您

function openNav() {
    console.log("open");
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}


document.addEventListener("click", function(){
  if( parseInt( $('#mySidenav').css('width') ) > 0 ){
    document.getElementById("mySidenav").style.width = "0";
  }
});

---

请试试这个，让我知道它是否适合你

function openNav() {
    console.log("open");
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}


document.addEventListener("click", function(){
  if( parseInt( $('#mySidenav').css('width') ) > 0 ){
    document.getElementById("mySidenav").style.width = "0";
  }
});

---

只需添加

touchstart

即可在手机上使用：）

---

只需添加

touchstart

即可在手机上使用：）

---

试试这个，就像前面提到的那样；这只适用于桌面，而不适用于移动设备。我通过在答案中添加

touchstart

来修复它。如前所述，非常感谢；这只适用于桌面，而不适用于移动设备。我通过在答案中添加

touchstart

来修复它。非常感谢：）