Javascript 向三行菜单图标添加下拉菜单

我正在使用w3中的一个示例为我的网站创建一个菜单图标。它工作得很好，但我试图添加一个下拉菜单，当我点击图标

我添加了div

id=“mydropdown”

，试图创建我想要的菜单

函数myFunction（x）{
x、 切换（“更改”）；
}

.container{
显示：内联块；
光标：指针；
}
.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
/*淡出第二条*/
.找零{
不透明度：0；
}
/*旋转最后一条*/
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}

解决方案1（仅限JS）： 切换图标时，还要切换下拉菜单“显示/隐藏”

function myFunction(x) {
  x.classList.toggle("change");
  var dropdown = document.getElementById('myDropdown').style;
  dropdown.display = dropdown.display === 'none' ? 'block' : 'none';
}

.container{
显示：内联块；
光标：指针；
}
.bar1，
.bar2，
.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
/*淡出第二条*/
.找零{
不透明度：0；
}
/*旋转最后一条*/
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}

函数myFunction（x）{
x、 切换（“更改”）；
var dropdown=document.getElementById（'myDropdown'）.style；
dropdown.display=dropdown.display=='none'？'block'：'none'；
}

在单击时切换下拉列表的样式

document.getElementById（'myDropdown'）。style.display=document.getElementById（'myDropdown'）。style.display=='block'？'无'：'块'


函数myFunction（x）{
x、 切换（“更改”）；
document.getElementById（'myDropdown'）。style.display=document.getElementById（'myDropdown'）。style.display='block'？'none'：'block'；
}
.container{
显示：内联块；
光标：指针；
}
.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
/*淡出第二条*/
.找零{
不透明度：0；
}
/*旋转最后一条*/
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
.下拉内容{
显示：无；
}