Question

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

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

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

以下是相关代码：

var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function (event) {        
    "use strict";
    for (var i=0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if(event.target != rightdropdown) {
        rightdropdown.style.display = 'none';
    }
    }
});

window.onload = function () {
    "use strict";
    var leftbutton1 = document.getElementById('left_side_button1');
    var leftdropdowncontent1 = document.getElementById('dropdown_content1');
    
    var leftbutton2 = document.getElementById('left_side_button2');
    var leftdropdowncontent2 = document.getElementById('dropdown_content2');
    
    var leftbutton3 = document.getElementById('left_side_button3');
    var leftdropdowncontent3 = document.getElementById('dropdown_content3');
    
    var midbutton4 = document.getElementById('mid_side_button4');
    var middropdowncontent4 = document.getElementById('dropdown_content4');
    
    var midbutton5 = document.getElementById('mid_side_button5');
    var middropdowncontent5 = document.getElementById('dropdown_content5');
    
    var midbutton6 = document.getElementById('mid_side_button6');
    var middropdowncontent6 = document.getElementById('dropdown_content6')
    
    var rightbutton7 = document.getElementById('right_side_button7');
    var rightdropdowncontent7 = document.getElementById('dropdown_content7');
    
    var rightbutton8 = document.getElementById('right_side_button8');
    var rightdropdowncontent8 = document.getElementById('dropdown_content8');
    
    var rightbutton9 = document.getElementById('right_side_button9');
    var rightdropdowncontent9 = document.getElementById('dropdown_content9');
    document.onclick = function (e) {
        if (e.target === leftbutton1) {
            leftdropdowncontent1.style.display = 'block';
        }
        if (e.target === leftbutton2) {
            leftdropdowncontent2.style.display = 'block';
        }
        if (e.target === leftbutton3) {
            leftdropdowncontent3.style.display = 'block';
        }
        if (e.target === midbutton4) {
            middropdowncontent4.style.display = 'block';
        }
        if (e.target === midbutton5) {
            middropdowncontent5.style.display = 'block';
        }
        if (e.target === midbutton6) {
            middropdowncontent6.style.display = 'block'
        }
        if (e.target === rightbutton7) {
            rightdropdowncontent7.style.display = 'block';
        }
        if (e.target === rightbutton8) {
            rightdropdowncontent8.style.display = 'block';
        }
        if (e.target === rightbutton9) {
            rightdropdowncontent9.style.display = 'block';
        }
    };
};

#mid_container{
    margin: 0px auto;
    overflow: auto;
    width: 1000px;
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-bottom: 105px;
}
#container_top_padder{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
    text-align: center;
    border-bottom: 2px solid black;
}
#container_top_padder li{
    text-decoration: none;
    display: inline-block;
    font-weight: none;
}
#individual_top_padder_text{
    margin: 0px auto;
}
#vehicle_1_header{ /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_2_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_3_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{   /* not assigned at the moment */
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    display:inline-block;
}
#left_section{
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 48px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#left_side_button1{
    /*background-color: aqua; */
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content1{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content1 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content1 a:hover {
    background-color: #f1f1f1;
}
#left_side_button2{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content2{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content2 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content2 a:hover {
    background-color: #f1f1f1;
}
#left_side_button3{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);   
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content3{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content3 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content3 a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin-left: 25px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#mid_side_button4{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content4{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content4 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_all_text{
    color: black;
    text-align:center;
}
#dropdown_content4 a:hover {
    background-color: #f1f1f1
}
#mid_side_button5{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content5{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content5 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content5 a:hover {
    background-color: #f1f1f1
}
#mid_side_button6{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content6{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content6 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content6 a:hover {
    background-color: #f1f1f1
}
#right_section{
    margin-right: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#right_side_button7{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content7{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content7 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content7 a:hover {
    background-color: #f1f1f1;
}
#right_side_button8{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content8{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
    z-index: 10000;
}
#dropdown_content8 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content8 a:hover {
    background-color: #f1f1f1;
}
#right_side_button9{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content9{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content9 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

<div id="mid_container">
        <header id="container_top_padder">
            <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
            <button id="left_side_button1">Make</button>
            <div class="hidden_border1">
                <div id="dropdown_content1">                    
                <a class="dropdown_all_text" href="#">Cars</a>
                <a class="dropdown_all_text" href="#">Bikes</a>
                <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            </div>
            <button id="left_side_button2">Model</button>
                <div id="dropdown_content2">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            <button id="left_side_button3">Year</button>
                <div id="dropdown_content3">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
        </article>
        <article id="mid_section">
            <button id="mid_side_button4">Make</button> 
                <div id="dropdown_content4">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="mid_side_button5">Model</button>
                <div id="dropdown_content5">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
            <button id="mid_side_button6">Year</button>
                <div id="dropdown_content6">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
        </article>
        <article id="right_section">
            <button id="right_side_button7">Make</button>
                <div id="dropdown_content7">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="right_side_button8">Model</button>
                <div id="dropdown_content8">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
            <button id="right_side_button9">Year</button>
                <div id="dropdown_content9">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
        </article>
    </div>

Answer 1

你可以做这样的事情，肯定会有效

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
  <script src="angular.min.js"></script>
  <style>
  #mid_container{
    margin: 0px auto;
    overflow: auto;
    width: 1000px;
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-bottom: 105px;
}
#container_top_padder{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
    text-align: center;
    border-bottom: 2px solid black;
}
#container_top_padder li{
    text-decoration: none;
    display: inline-block;
    font-weight: none;
}
#individual_top_padder_text{
    margin: 0px auto;
}
#vehicle_1_header{ /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_2_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_3_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{   /* not assigned at the moment */
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    display:inline-block;
}
#left_section{
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 48px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#left_side_button1{
    /*background-color: aqua; */
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content1{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content1 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content1 a:hover {
    background-color: #f1f1f1;
}
#left_side_button2{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content2{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content2 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content2 a:hover {
    background-color: #f1f1f1;
}
#left_side_button3{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);   
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content3{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content3 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content3 a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin-left: 25px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#mid_side_button4{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content4{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content4 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_all_text{
    color: black;
    text-align:center;
}
#dropdown_content4 a:hover {
    background-color: #f1f1f1
}
#mid_side_button5{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content5{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content5 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content5 a:hover {
    background-color: #f1f1f1
}
#mid_side_button6{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content6{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content6 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content6 a:hover {
    background-color: #f1f1f1
}
#right_section{
    margin-right: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#right_side_button7{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content7{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content7 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content7 a:hover {
    background-color: #f1f1f1;
}
#right_side_button8{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content8{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
    z-index: 10000;
}
#dropdown_content8 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content8 a:hover {
    background-color: #f1f1f1;
}
#right_side_button9{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content9{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content9 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
</style>
</head>
<body>
<div id="mid_container">
        <header id="container_top_padder">
            <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
            <button id="left_side_button1">Make</button>
            <div class="hidden_border1">
                <div id="dropdown_content1">                    
                <a class="dropdown_all_text" href="#">Cars</a>
                <a class="dropdown_all_text" href="#">Bikes</a>
                <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            </div>
            <button id="left_side_button2">Model</button>
                <div id="dropdown_content2">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            <button id="left_side_button3">Year</button>
                <div id="dropdown_content3">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
        </article>
        <article id="mid_section">
            <button id="mid_side_button4">Make</button> 
                <div id="dropdown_content4">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="mid_side_button5">Model</button>
                <div id="dropdown_content5">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
            <button id="mid_side_button6">Year</button>
                <div id="dropdown_content6">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
        </article>
        <article id="right_section">
            <button id="right_side_button7">Make</button>
                <div id="dropdown_content7">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="right_side_button8">Model</button>
                <div id="dropdown_content8">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
            <button id="right_side_button9">Year</button>
                <div id="dropdown_content9">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
        </article>
    </div>
<script>
var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function (event) {        
    "use strict";
    for (var i=0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if(event.target != rightdropdown) {
        rightdropdown.style.display = 'none';
    }
    }
});

window.onload = function () {
    "use strict";
    var button=[];
    var dropdown=[];
    for(var i=1;i<=9;i++){
    	dropdown[i]=document.getElementById('dropdown_content'+i);
    }
    for(var j=1;j<=3;j++){
    	button[j]=document.getElementById('left_side_button'+j);
    	button[j+3]=document.getElementById('mid_side_button'+(j+3));
    	button[j+6]=document.getElementById('right_side_button'+(j+6));
    }
    document.onclick = function (e) {
    	for(var k=1;k<=9;k++){
        if (e.target === button[k]) {
        	dropdown[k].style.display = 'block';
        }
        }
    };
};
</script>
</body>
</html>

＆＃13;

我已将所有下拉菜单和按钮保存在两个数组中，然后在onclick中使用数组调用它们，

这将是我改变的javascript代码，

window.onload = function () {
"use strict";
var button=[];
var dropdown=[];
for(var i=1;i<=9;i++){
    dropdown[i]=document.getElementById('dropdown_content'+i);
}
for(var j=1;j<=3;j++){
    button[j]=document.getElementById('left_side_button'+j);
    button[j+3]=document.getElementById('mid_side_button'+(j+3));
    button[j+6]=document.getElementById('right_side_button'+(j+6));
}
document.onclick = function (e) {
    for(var k=1;k<=9;k++){
    if (e.target === button[k]) {
        dropdown[k].style.display = 'block';
    }
    }
};
};

Answer 2

由于您使用jQuery对其进行了标记，因此可以按照以下方式执行此操作：

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

使用像left_side_button这样的公共类会将此进一步简化为

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

Answer 3

您可以使用字典容器喜欢这个

 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'
  }

下面的代码段

var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function(event) {
  "use strict";
  for (var i = 0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if (event.target != rightdropdown) {
      rightdropdown.style.display = 'none';
    }
  }
});

window.onload = function() {
  "use strict";
  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'
  }

  document.onclick = function(e) {
    for (var key in dict) {
      if(e.target === document.getElementById(key)) {
        document.getElementById(dict[key]).style.display = 'block';
      }
    }
  }

};

#mid_container {
  margin: 0px auto;
  overflow: auto;
  width: 1000px;
  display: block;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  align-content: center;
  margin-bottom: 105px;
}
#container_top_padder {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 50px;
  margin-left: 50px;
  text-align: center;
  border-bottom: 2px solid black;
}
#container_top_padder li {
  text-decoration: none;
  display: inline-block;
  font-weight: none;
}
#individual_top_padder_text {
  margin: 0px auto;
}
#vehicle_1_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: left;
  border-bottom: 2px solid black;
}
#vehicle_2_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: left;
  border-bottom: 2px solid black;
}
#vehicle_3_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: right;
  border-bottom: 2px solid black;
}
.compare_sections_titles {
  /* not assigned at the moment */
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  margin-bottom: 0px;
  display: inline-block;
}
#left_section {
  margin-left: 15px;
  margin-right: 5px;
  margin-bottom: 0px;
  margin-top: 5px;
  float: left;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 48px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#left_side_button1 {
  /*background-color: aqua; */
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content1 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content1 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content1 a:hover {
  background-color: #f1f1f1;
}
#left_side_button2 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content2 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content2 a:hover {
  background-color: #f1f1f1;
}
#left_side_button3 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content3 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content3 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content3 a:hover {
  background-color: #f1f1f1;
}
#mid_section {
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-top: 5px;
  float: left;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#mid_side_button4 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content4 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content4 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown_all_text {
  color: black;
  text-align: center;
}
#dropdown_content4 a:hover {
  background-color: #f1f1f1
}
#mid_side_button5 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content5 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content5 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content5 a:hover {
  background-color: #f1f1f1
}
#mid_side_button6 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content6 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content6 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content6 a:hover {
  background-color: #f1f1f1
}
#right_section {
  margin-right: 15px;
  margin-bottom: 0px;
  margin-top: 5px;
  float: right;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#right_side_button7 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content7 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content7 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content7 a:hover {
  background-color: #f1f1f1;
}
#right_side_button8 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content8 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
  z-index: 10000;
}
#dropdown_content8 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content8 a:hover {
  background-color: #f1f1f1;
}
#right_side_button9 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content9 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content9 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

<div id="mid_container">
  <header id="container_top_padder">
    <li>
      <h2 id="individual_top_padder_text">Compare Vehicles</h2>
    </li>
  </header>
  <article id="left_section">
    <button id="left_side_button1">Make</button>
    <div class="hidden_border1">
      <div id="dropdown_content1">
        <a class="dropdown_all_text" href="#">Cars</a>
        <a class="dropdown_all_text" href="#">Bikes</a>
        <a class="dropdown_all_text" href="#">Trucks</a>
      </div>
    </div>
    <button id="left_side_button2">Model</button>
    <div id="dropdown_content2">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
    <button id="left_side_button3">Year</button>
    <div id="dropdown_content3">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
  </article>
  <article id="mid_section">
    <button id="mid_side_button4">Make</button>
    <div id="dropdown_content4">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="mid_side_button5">Model</button>
    <div id="dropdown_content5">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
    <button id="mid_side_button6">Year</button>
    <div id="dropdown_content6">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
  </article>
  <article id="right_section">
    <button id="right_side_button7">Make</button>
    <div id="dropdown_content7">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="right_side_button8">Model</button>
    <div id="dropdown_content8">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
    <button id="right_side_button9">Year</button>
    <div id="dropdown_content9">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
  </article>
</div>

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

3 个答案: