jQuery菜单未正确显示

我正在创建一个单击时显示的菜单。 基本上，我想做的是在菜单打开时保持“btn”的出现。另外，我不知道当我从菜单分区中单击时，如何选择关闭菜单。提前谢谢

var sidebarBox=document.querySelector（“#box”），
sidebarBtn=document.querySelector（“#btn”），
pageWrapper=document.querySelector（“#页面包装器”）；
sidebarBtn.addEventListener（'click'，函数（事件）{
sidebarBtn.classList.toggle（'active'）；
sidebarBox.classList.toggle（'active'）；
});
pageWrapper.addEventListener（'click'，函数（事件）{
if（sidebarBox.classList.contains（'active'））{
sidebarBtn.classList.remove（'active'）；
sidebarBox.classList.remove（'active'）；
}
});
window.addEventListener（'keydown'，函数（事件）{
if（sidebarBox.classList.contains（'active'）&&event.keyCode==27）{
sidebarBtn.classList.remove（'active'）；
sidebarBox.classList.remove（'active'）；
}
});    
/*-----------响应菜单-------*/
#btn{
浮动：对；
顶部：15px；
光标：指针；
-webkit过渡：左500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：左500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#btn部门{
宽度：35px；
高度：2倍；
边缘底部：8px；
背景色：#2d；
-webkit变换：不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
变换：变换500ms立方贝塞尔（0.6,0.05,0.28,0.91），不透明度500ms，背景色250ms；
过渡：变换500ms立方贝塞尔（0.6,0.05,0.28,0.91），不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#活跃的{
左：230像素；
z指数：999！重要；
}
#活动分区{
背景色：#343838；
z指数：999！重要；
不透明度：1；
}
#btn.active#top{
-webkit变换：translateY（10px）旋转（-135度）；
变换：translateY（10px）旋转（-135度）；
}
#btn.active#middle{
不透明度：0；
/*变换：旋转（135度）*/
}
#btn.active#底部{
-webkit变换：translateY（-10px）旋转（-45度）；
变换：translateY（-10px）旋转（-45度）；
}
#盒子{
位置：固定；
溢出：自动；
顶部：0px；
右：-275px；
宽度：275px；
不透明度：0；
填充：20px 0px；
身高：100%；
背景色：#f6f6f6；
颜色：#343838；
-webkit过渡：所有350ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：所有350ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#box.active{
右：0px；
不透明度：1；
z指数：4；
}
#项目{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
#项目，项目{
位置：相对位置；
光标：指针；
字号：2em；
填充：15px 30px；
-webkit转换：所有250ms；
过渡：所有250ms；
}
#物品。物品：悬停{
填充：15px 45px；
背景色：rgba（52,56,56,0.2）；
}
#btn，#btn*{
改变：转变；
}
#盒子{
将改变：变换，不透明度；
}

项目1
项目2
项目3
项目4
项目5
尝试以下操作

1.You need to assign z-index values to negative value when #box.active
2.You can use event.target.nodeName to find outside of the DIV menu


var sidebarBox=document.querySelector（“#box”），
sidebarBtn=document.querySelector（“#btn”）；
sidebarBtn.addEventListener（'click'，函数（事件）{
sidebarBtn.classList.toggle（'active'）；
sidebarBox.classList.toggle（'active'）；
});
$（文档）。在（“单击”）上，函数（e）{
if（event.target.nodeName！=“DIV”）{
sidebarBtn.classList.remove（'active'）；
sidebarBox.classList.remove（'active'）；
}
});
/*-----------响应菜单-------*/
#btn{
浮动：对；
顶部：15px；
光标：指针；
-webkit过渡：左500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：左500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#btn部门{
宽度：35px；
高度：2倍；
边缘底部：8px；
背景色：#2d；
-webkit变换：不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
变换：变换500ms立方贝塞尔（0.6,0.05,0.28,0.91），不透明度500ms，背景色250ms；
过渡：变换500ms立方贝塞尔（0.6,0.05,0.28,0.91），不透明度500ms，背景色250ms，-webkit变换500ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#活跃的{
左：230像素；
z指数：999！重要；
}
#活动分区{
背景色：#343838；
z指数：999！重要；
不透明度：1；
}
#btn.active#top{
-webkit变换：translateY（10px）旋转（-135度）；
变换：translateY（10px）旋转（-135度）；
}
#btn.active#middle{
不透明度：0；
/*变换：旋转（135度）*/
}
#btn.active#底部{
-webkit变换：translateY（-10px）旋转（-45度）；
变换：translateY（-10px）旋转（-45度）；
}
#盒子{
位置：固定；
溢出：自动；
顶部：0px；
右：-275px；
宽度：275px；
不透明度：0；
填充：20px 0px；
身高：100%；
背景色：#f6f6f6；
颜色：#343838；
-webkit过渡：所有350ms立方贝塞尔（0.6,0.05,0.28,0.91）；
过渡：所有350ms立方贝塞尔（0.6,0.05,0.28,0.91）；
}
#box.active{
右：0px；
不透明度：1；
z指数：-10；
}
#项目{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
#项目，项目{
位置：相对位置；
光标：指针；
字号：2em；
填充：15px 30px；
-webkit转换：所有250ms；
过渡：所有250ms；
}
#物品。物品：悬停{
填充：15px 45px