折叠“放下”导航菜单

Question

添加缓慢上下滑动以及打开新部分时自动关闭。我想我可以找到滑动选项的属性，但是当打开新的部分时，前一部分将如何关闭？如果有人在菜单外点击，关闭菜单图标最好的是什么？另外，考虑到我的2个脚本函数是完全相同的，除了classlist.toggle("change")和getElementsByClassName('')之外，还有一种方法可以为两个实例使用1个调用函数，不是吗？

//Script
function menuIcon(x){
 /* Toggle between adding and removing the "active" class,
 to highlight the button that controls the panel */
 x.classList.toggle("change");

 /* Toggle between hiding and showing the active panel */
 var panel = document.getElementsByClassName('panel');
 for (var i = 0; i < panel.length; i++) {
  if (panel[i].style.display === "block") {
  panel[i].style.display = "none";
  } else {
  panel[i].style.display = "block";
  }
 }
}

function menuSub(x){
 /* Toggle between hiding and showing the active panel */
 var subM = document.getElementsByClassName('subItem'+x);
 for (var i = 0; i < subM.length; i++) {
  if (subM[i].style.display === "block") {
  subM[i].style.display = "none";
  } else {
  subM[i].style.display = "block";
  }
 }
}

   
body {
  font-family: Georgia; 
  color: #444; 
}

.menuShell {
  position: fixed;
  left: 0;
  bottom: 0;
  padding-left: 60px;
  padding-bottom: 100px;
  width: 105px;
}

.menuLogo {
  display: block;
  cursor: pointer;
  padding-left: 33%;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #666666;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

div.panel {
  background-color: #666;
  display: none;
  position: relative;
  transition: 1s;
  color: #f2f2f2;
}

div.item:hover {
  background-color: #222;
}

.item {
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
}

.subItem, .subItem1, .subItem2, .subItem3, .subItem4 {
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  display: none;
  text-align: center;
}

<div class="menuShell">
  <div class="panel">
    <div class="subItem1">Menu1.1</div>
    <div class="subItem1">Menu1.2</div>
   <div class="item" onclick="menuSub(1)">Menu1</div>
    <div class="subItem2">Menu2.1</div>
    <div class="subItem2">Menu2.2</div>
   <div class="item" onclick="menuSub(2)">Menu2</div>
    <div class="subItem3">Menu3.1</div>
    <div class="subItem3">Menu3.2</div>
   <div class="item" onclick="menuSub(3)">Menu3</div>
    <div class="subItem4">Menu4.1</div>
    <div class="subItem4">Menu4.2</div>
   <div class="item" onclick="menuSub(4)">Menu4</div>
  </div>
  <div class="menuLogo" onclick="menuIcon(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <!--Menu bars-->
</div>