Javascript 下拉按钮

参考以下代码，是否可以更改按钮以使操作相反？ 代码立即显示在“单击我”下打开的菜单

如果可能，我希望按钮的行为方式相反，即开始关闭，按下后打开菜单

函数dropIt（）{
toggleClass（document.getElementById（'navigation-dropdown'），“hide”）；
}
函数foldIt（）{
toggleClass（document.getElementById（'navigation-dropdown'），“hide”）；
}
函数setHeight（）{
var el=document.getElementById（'navigation-dropdown'）；
el.style.height=el.clientHeight+“px”；
}
var toggleClass=函数（el，类名）{
如果（el）{
if（el.className.indexOf（className）！=-1）{
el.className=el.className.replace（className“”）；
}否则{
el.className+=''类名称；
}
}
};
设置高度（）
html{
保证金：0；
填充：0；
}
身体{
字体大小：100%；
字体系列：Arial，无衬线；
背景色：#ffffff；
保证金：0；
填充：0；
}
#包装纸{
浮动：左；
位置：相对位置；
宽度：640px；
保证金：0；
填充：20px 50px 20px 50px；
}
#航行{
浮动：左；
宽度：100%；
保证金：0；
填充：0；
}
#导航潜艇{
浮动：左；
光标：指针；
颜色：#ffffff；
字体大小：16px；
背景色：#69C；
保证金：0；
填充：6px 15px 7px 15px；
}
#导航子：悬停{
背景色：#C66；
}
#导航子节点：活动{
背景色：#eeeeee；
}
#导航下拉列表{
位置：绝对位置；
顶部：50px；
背景色：#eeeeee；
边框：#69c4px实心；
保证金：0；
填充：15px 15px 15px 30px；
/*这里*/
-webkit过渡：3s缓解；
-moz转换：3s放松；
-ms转换：3s放松；
过渡：3秒放松；
}
.隐藏{
不透明度：0；
高度：0！重要；
}
#导航下拉菜单{
浮动：左；
宽度：150px；
列表样式：无；
保证金：0；
填充：0；
}
#导航下拉列表{
浮动：左；
宽度：100%；
字体大小：14px；
线高：24px；
保证金：0；
填充：0；
}
#导航下拉菜单ul li a{
颜色：#69C；
文字装饰：无；
}
#导航下拉列表ul li a：悬停{
文字装饰：下划线；
}
#导航下拉列表ul li a：激活{
颜色：#dddddd；
}
#导航下拉输入{
浮动：左；
光标：指针；
颜色：#333333；
字体大小：14px；
字体系列：Arial，无衬线；
}

点击我










只需将隐藏类添加到导航下拉列表div中：

<div id="navigation-dropdown" class="hide">

需要添加循环建议的隐藏类，但它会产生下拉列表高度问题。所以我已经调整了设置高度函数和if-else条件，使其完美工作


函数dropIt（）{
toggleClass（document.getElementById（'navigation-dropdown'），“hide”）；
}
函数foldIt（）{
toggleClass（document.getElementById（'navigation-dropdown'），“hide”）；
}
函数setHeight（）{
var el=document.getElementById（'navigation-dropdown'）；
el.style.height=el.clientHeight+“px”；
}
var toggleClass=函数（el，类名）{
如果（el）{
if（el.className.indexOf（className）！=-1）{
el.className=el.className.replace（className“”）；
设置高度（）；
}否则{
el.className+=''类名称；
el.style.height=''；
}
}
};
html{
保证金：0；
填充：0；
}
身体{
字体大小：100%；
字体系列：Arial，无衬线；
背景色：#ffffff；
保证金：0；
填充：0；
}
#包装纸{
浮动：左；
位置：相对位置；
宽度：640px；
保证金：0；
填充：20px 50px 20px 50px；
}
#航行{
浮动：左；
宽度：100%；
保证金：0；
填充：0；
}
#导航潜艇{
浮动：左；
光标：指针；
颜色：#ffffff；
字体大小：16px；
背景色：#69C；
保证金：0；
填充：6px 15px 7px 15px；
}
#导航子：悬停{
背景色：#C66；
}
#导航子节点：活动{
背景色：#eeeeee；
}
#导航下拉列表{
位置：绝对位置；
顶部：50px；
背景色：#eeeeee；
边框：#69c4px实心；
保证金：0；
填充：15px 15px 15px 30px；
/*这里*/
-webkit过渡：3s缓解；
-moz转换：3s放松；
-ms转换：3s放松；
过渡：3秒放松；
}
.隐藏{
不透明度：0；
高度：0！重要；
}
#导航下拉菜单{
浮动：左；
宽度：150px；
列表样式：无；
保证金：0；
填充：0；
}
#导航下拉列表{
浮动：左；
宽度：100%；
字体大小：14px；
线高：24px；
保证金：0；
填充：0；
}
#导航下拉菜单ul li a{
颜色：#69C；
文字装饰：无；
}
#导航下拉列表ul li a：悬停{
文字装饰：下划线；
}
#导航下拉列表ul li a：激活{
颜色：#dddddd；
}
#导航下拉输入{
浮动：左；
光标：指针；
颜色：#333333；
字体大小：14px；
字体系列：Arial，无衬线；
}

点击我










您想更正此代码还是我给您发送不同样式的新代码？您不需要自己的
toggleClass
功能。您的
函数（el，className）
所做的与
if（el）el.classList.toggle（className）