Javascript 不确定如何为多个下拉菜单创建数组

我有所有这些多变量和每个按钮的IF语句。我想知道如何正确地将它们放入数组中以缩短代码长度。我试过了，但没有成功。此外，由于每个按钮在HTML中使用ID而不是类名，CSS文件变得相当大。出于某种原因，将它们更改为类并将相应的javascript代码“getElementById”更改为“GetElementsByCassName”是行不通的

非常感谢您的帮助。有9个不同的按钮，每个按钮都有一个唯一的ID用于框、按钮和按钮内容

请注意，第一个数组仅用于关闭下拉菜单，而不是打开它们

以下是相关代码：

var-dropdownArray=['dropdown\u content1'，'dropdown\u content2'，'dropdown\u content3'，'dropdown\u content4'，'dropdown\u content5'，'dropdown\u content6'，'dropdown\u content7'，'dropdown\u content8'，'dropdown\u content9'；
addEventListener（'mouseup'，函数（事件）{
“严格使用”；
对于（var i=0；i
#mid#U容器{
保证金：0px自动；
溢出：自动；
宽度：1000px；
显示：块；
背景色：白色；
边框：1px纯黑；
文本对齐：居中；
对齐内容：居中对齐；
边缘底部：105px；
}
#容器顶部填充器{
填充顶部：10px；
垫底：10px；
右边距：50px；
左边距：50像素；
文本对齐：居中；
底部边框：2件纯黑；
}
#容器顶部填充器李{
文字装饰：无；
显示：内联块；
字体大小：无；
}
#单个\u顶部\u填充器\u文本{
保证金：0px自动；
}
#车辆_1_头{/*目前未分配*/
左边距：5px；
右边距：5px；
边缘顶部：5px；
边缘底部：0px；
填充：0px；
背景图像：-webkit径向渐变（左上，椭圆最远侧，#8Cffff 0%，#Fffff 100%）；
宽度：100px；
浮动：左；
底部边框：2件纯黑；
}
#车辆2_头{/*目前未分配*/
左边距：5px；
右边距：5px；
边缘顶部：5px；
边缘底部：0px；
填充：0px；
背景图像：-webkit径向渐变（左上，椭圆最远侧，#8Cffff 0%，#Fffff 100%）；
宽度：100px；
浮动：左；
底部边框：2件纯黑；
}
#车辆3_头{/*目前未分配*/
左边距：5px；
右边距：5px；
边缘顶部：5px；
边缘底部：0px；
填充：0px；
背景图像：-webkit径向渐变（左上，椭圆最远侧，#8Cffff 0%，#Fffff 100%）；
宽度：100px；
浮动：对；
底部边框：2件纯黑；
}
.比较章节和标题{/*当前未分配*/
左边距：2倍；
右边距：2px；
边缘顶部：2倍；
边缘底部：0px；
显示：内联块；
}
#左U段{
左边距：15px；
右边距：5px；
边缘底部：0px；
边缘顶部：5px；
浮动：左；
文本对齐：居中；
填充顶部：20px；
填充底部：48px；
宽度：300px；
背景色：白色；
盒影：4px4px4p888；
-左上角moz边界半径：10px；
边框左上半径：10px；
}
#左侧按钮1{
/*背景色：浅绿色*/
背景：-webkit线性梯度（#ffffff，#C6）；
右侧填充：90px；
填充lef
$('button[id^=left_side_button]').click(function(){
    $(this).next().show();// or use toggle() if you want to show/hide on click
});

$('.left_side_button').click(function(){
    $(this).next().show();// or use toggle() if you want to show/hide on click
});

 var dict = {
    'left_side_button1': 'dropdown_content1',
    'left_side_button2': 'dropdown_content2',
    'left_side_button3': 'dropdown_content3',
    'mid_side_button4': 'dropdown_content4',
    'mid_side_button5': 'dropdown_content5',
    'mid_side_button6': 'dropdown_content6',
    'right_side_button7': 'dropdown_content7',
    'right_side_button8': 'dropdown_content8',
    'right_side_button9': 'dropdown_content9'
  }