Html 切换菜单列表项显示

我有一个菜单，当你点击汉堡包图标时，我想下拉它。单击按钮后会显示列表项，但未单击按钮时仍会显示列表项。我不知道如何隐藏菜单

我这里有代码：

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
$（文档）.ready（函数（）{
$（'nav-icon3'）。在（'click'，function（）上{
$（this.toggleClass（'open'）；
});
});
*{
框大小：边框框；
}
html，正文{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
字号：1rem；
}
.标题{
背景色：#FFF；
宽度：100%；
保证金：0px自动；
显示：块；
排名：0；
利润率最高：7%；
高度：80px；
}
h1{
左缘：5%；
左：1%；
字体系列：“龙虾”，草书；
边际上限：0；
浮动：左；
页边距底部：0；
颜色：#D18E8F；
}
#导航图标{
宽度：30px；
高度：30px；
位置：相对位置；
保证金权利：7%；
边缘顶部：8px；
/*右：1%*/
浮动：对；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
光标：指针；
}
#导航图标3跨度{
显示：块；
位置：绝对位置；
高度：4px；
宽度：100%；
背景#8c8c；
边界半径：6px；
不透明度：1；
左：0；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.25s易入易出；
-moz转换：.25s易入易出；
-o型过渡：.25秒缓进缓出；
转换：.25秒轻松输入输出；
}
#导航图标3跨度：第n个子（1）{
顶部：0px；
}
#nav-icon3跨度：第n个孩子（2），#nav-icon3跨度：第n个孩子（3）{
顶部：10px；
}
#导航图标3跨度：第n个子（4）{
顶部：20px；
}
#导航图标3.开放跨距：第n个子（1）{
顶部：10px；
宽度：0%；
左：50%；
}
#导航图标3.开放跨距：第n个子（2）{
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#导航图标3.开放跨距：第n个子（3）{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
#导航图标3.开放跨距：第n个子（4）{
顶部：10px；
宽度：0%；
左：50%；
}
.topnav{
/*显示：无*/
明确：两者皆有；
填充：0；
高度：160px；
}
ul.topnav.responsive{
列表样式：无；
字体系列：“Raleway”、“无衬线字体”；
浮动：左；
左缘：7%；
/*左：2%*/
边际上限：0；
宽度：85%；
页边距底部：0；
}
ul.topnav.li{
填充顶部：16px；
填充底部：16px；
边框底部：1px实心#C6；
}
ul.topnav.lia{
文字装饰：无；
颜色：#8c8c8c；
}
ul.topnav.lia：悬停{
颜色：#7EBEA3；
}

加布里埃拉·法尔凡
加布里埃拉·法尔凡






我已经做了这个小修正。希望能有帮助

CSS:

JS:

如果这是您想要的，请告诉我。
只需添加
.topnav{display:none；}
和
.topnav.responsive{display:block；}
，您的代码就能正常工作

.topnav {
  display: none;
}

.topnav.responsive {
  display: block;
  clear: both;
  padding: 0;
  height: 160px;
}

您还可以添加此选项，使整个汉堡可点击（而不仅仅是一行）

代码的工作分支：

function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className = " responsive";
        } else {
            x.className = "topnav";
        }
    }

.topnav {
  display: none;
}

.topnav.responsive {
  display: block;
  clear: both;
  padding: 0;
  height: 160px;
}

#nav-icon3 {
  width: 30px;
  height: 30px;
  display: block;
}