不知道如何爲多個下拉菜單創建數組

我有所有這些多個變量和每個按鈕的IF語句。我想知道如何正確地將它們放入數組中以縮短代碼的長度。我嘗試過但沒有成功。另外，因爲每個按鈕都使用ID代替HTML中的類名，所以CSS文件變得非常大。出於某種原因將其更改爲類並將相應的JavaScript代碼「getElementById」更改爲「getElementsByClassName」不起作用。不知道如何爲多個下拉菜單創建數組

幫助將不勝感激。有9個不同的按鈕，每個按鈕都有一個唯一的ID框，按鈕和按鈕的內容。

請注意，第一個數組僅用於封閉的下拉menues不打開它們

下面是相關代碼：

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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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>

來源

2016-11-20 Dale

既然你使用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 
});

來源

2016-11-20 03:27:14 charlietfl

我會把這個window.onload函數嗎？ – Dale

是或包裝在'$（function（）{}）'中或者將腳本放在所有元素的底部 – charlietfl

您可以使用字典容器喜歡這個

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>

來源

2016-11-20 03:34:19 repzero

你可以做這樣的事情，它會定義Ÿ工作

<!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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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; 
 
\t border-top-left-radius: 5px; 
 
\t -moz-border-radius-topright: 5px; 
 
\t 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++){ 
 
    \t dropdown[i]=document.getElementById('dropdown_content'+i); 
 
    } 
 
    for(var j=1;j<=3;j++){ 
 
    \t button[j]=document.getElementById('left_side_button'+j); 
 
    \t button[j+3]=document.getElementById('mid_side_button'+(j+3)); 
 
    \t button[j+6]=document.getElementById('right_side_button'+(j+6)); 
 
    } 
 
    document.onclick = function (e) { 
 
    \t for(var k=1;k<=9;k++){ 
 
     if (e.target === button[k]) { 
 
     \t dropdown[k].style.display = 'block'; 
 
     } 
 
     } 
 
    }; 
 
}; 
 
</script> 
 
</body> 
 
</html>

我已經在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'; 
    } 
    } 
}; 
};

來源

2016-11-20 03:51:31 GraveyardQueen

不知道如何爲多個下拉菜單創建數組

回答

相關問題