button, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#main_body{
margin: 0px auto;
background-color: #dedede;
}
#top_body{ /* for the sake of having no margin */
}
#top_container{
text-align:left;
margin: 4px;
padding: 0px;
/*background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); */
background:-webkit-linear-gradient(#666, #000);
position: relative;
color: aliceblue;
}
#top_header{
margin: 0px auto;
padding: 0px auto;
box-shadow: 3px 3px 3px grey;
text-decoration: none;
}
#header_hgroup li{
display:inline-block;
list-style: none;
text-decoration: none;
}
.header_text{
padding-right: 20px;
padding-left: 20px;
}
#Login_Button{
float: right;
height: 80px;
width: 80px;
background:-webkit-linear-gradient(#ffffff, #c6c6c6);
border: 0px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}
#Register_Button{
float: right;
height: 80px;
width: 80px;
background-color:white;
background:-webkit-linear-gradient(#ffffff, #c6c6c6);
border: 0px;
}
#top_nav{
text-decoration: none;
border-bottom: 1px solid black;
padding: 0px;
margin: 0px auto;
box-shadow: 3px 3px 3px grey;
text-align: left;
position:static
}
#top_nav li{
display: inline-block;
text-decoration: none;
}
#nav1{
border: 1px solid white;
margin-left: 0px;
}
.class1{
display: none;
}
#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;
}
#compare_dialog_container{
margin: 0px auto;
display: block;
width: 1000px;
border: 2px solid black;
text-align: center;
}
#compare_dialog_container li{
text-decoration: none;
font-weight: none;
list-style: none;
display: inline-block;
}
#Red_compare_button{
color: white;
background:-webkit-linear-gradient(#ff3e3e, #ff0000);
padding: 10px;
}
#dropdown_content9 a:hover {
background-color: #f1f1f1;
}
.popup_container{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.popup{
position:relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 2px solid #888;
width: 25%;
border-radius:28px; /* Stating that all corners should be rounded */
-moz-border-radius:28px; /*<*/
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
text-align: center;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.popup_x{
color: grey;
float: right;
font-size: 28px;
font-weight: bold;
}
.popup_x:hover{
color: black;
text-decoration: none;
cursor: pointer;
}
.popup_head{
padding: 2px 16px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, lightblue 0%, white 100%);
color: black;
box-shadow: 2px 2px 2px #888;
text-align: center;
-moz-border-radius-topright: 25px;
border-top-right-radius: 25px;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
}
.popup_bod{
padding: 2px 16px;
}
.loginform_bod_text{
font-weight: bold;
}
.popup_foot{
padding: 2px 16px;
color: white;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
background-image: -webkit-radial-gradient(bottom right, ellipse farthest-side, lightblue 0%, white 100%);
border-top: 1px solid #888;
}
.loginform_foot_text{
color: black;
font-weight: none;
text-decoration: none;
font-style: none;
border-top: 2px solid black;
text-align: center;
}
.loginform_foot_text:hover{
text-decoration: underline;
}
#register_section{
float: left; /* Moves everything this id is around to the left */
width:640px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px
}
#register_article{
border: 2px solid;
margin-bottom:20px;
padding:15px;
color:black;
box-shadow: 5px 5px 5px #999;
background:-webkit-linear-gradient(#ffffff, lightblue);
}
.Register_subtitle{
color:#999999;
}
.Single_span_text_coloring{
color:#0000CC;
font-weight:bolder;
}
#register_article_footer{
text-align: right;
color: gray;
}
#bottom_container{
clear:both;
text-align:center;
padding:10px;
border-top: 1px solid;
background: white;
color: black;
text-align:center;
font-weight:bold;
}
#the_header{
}
.show {
display:inline-block;
}
很抱歉，如果这看起来很明显，但我无法弄清楚在这段代码中添加切换的位置。我已经有了切换的CSS代码。我不确定是否需要在HTML或CSS中添加更多内容。
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 linkage_to_dict in dict) {
if(e.target === document.getElementById(linkage_to_dict)) {
document.getElementById(dict[linkage_to_dict]).style.display = 'block';
}
}
}
};.show {
display:inline-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>
答案 0 :(得分：0)
我为每个下拉列表添加了elm类。请查看这个：
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 l in dict) {
if (e.target === document.getElementById(l)) { document.getElementById(dict[l]).classList.toggle('show');
}
}
}
};.show {
display: block!important;
}
.elm {
display: none;
}<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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" class="elm">
<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>