我是Javascript的新手。我尝试使用Javascript创建下拉内容。使用ID查找元素但是如果我使用ClassName执行相同操作则不行。 我不能使用ID，因为这个HTML文件是动态创建的，并且可以有多个排序按钮。所以在这里使用ID不是一个选择。
<html>
<head>
<style>
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.alert_banner {
font-family: Arial, Helvetica, sans-serif;
color: #666;
text-shadow: 1px 1px 0px #fff;
background: #e4e6e7;
margin-bottom: 12px;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.footer_style {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
text-align: center;
line-height: 120%;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
text-shadow: 1px 1px 0px #fff;
}
.table_style a:link {
color: #666;
font-weight: bold;
text-decoration: none;
}
.table_style a:visited {
color: #999999;
font-weight: bold;
text-decoration: none;
}
.table_style a:active,
.table_style a:hover {
color: #bd5a35;
text-decoration: underline;
}
.table_style {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
text-shadow: 1px 1px 0px #fff;
background: #eaebec;
margin-bottom: 12px;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.table_style th {
padding: 21px 25px 22px 25px;
border-top: 1px solid #fafafa;
border-bottom: 2px solid #FF8300;
border-left: 1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.table_style th:first-child {
text-align: left;
padding-left: 20px;
}
.table_style tr:first-child th:first-child {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.table_style tr:first-child th:last-child {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.table_style tr {
text-align: center;
padding-left: 20px;
}
.table_style td:first-child {
text-align: left;
padding-left: 20px;
border-left: 0;
}
.table_style td {
padding: 18px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.table_style tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.table_style tr:last-child td {
border-bottom: 0;
}
.table_style tr:last-child td:first-child {
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.table_style tr:last-child td:last-child {
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.table_style tr:hover td {
background: #F2F2F2;
background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#f0f0f0));
background: -moz-linear-gradient(top, #F2F2F2, #f0f0f0);
}
</style>
</head>
<body>
<script>
function myFunction() {
document.getElementByClassName("dropdown-content").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<center style="background-color:#FFFFFF;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable" style="table-layout:fixed; max-width:100% !important; width:100% !important; min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#F2F2F2" border="0" cellpadding="0" cellspacing="0" width="600" style="border: 1px solid #d3d3d3;">
<tr>
<td align="center" valign="top">
<table bgcolor="#F2F2F2" border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#666;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
[IMAGE]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table class="alert_banner" bgcolor="#ebeef2" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" width="600">
<table align="left" border="0" cellpadding="0" cellspacing="1" width="100%">
<tr>
<td align="middle" valign="middle" width="60">
<table bgcolor="red" border="0" cellpadding="8" cellspacing="0" width="60" style="max-width: 100%;border-radius:3px;">
<tr>
<td align="middle">
<img src="http://images.arubathena.com/sys_notifications_email_image_1202.png" />
</td>
</tr>
</table>
</td>
<td align="left" valign="middle">
<table border="0" cellpadding="8" cellspacing="0" style="max-width: 100%;">
<tr>
<td align="left">
<h3 style="color:#666;line-height:125%;font-size:18px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">
<strong> Test Report</strong>
</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table class="" bgcolor="#f2f2f2" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
Tenant ID :102
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" bgcolor="#F2F2F2">
<div class="footer_style" style="text-align:left;">
<div><span style="color:#666;">$report_body</span></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table style="font-family: arial,sans-serif; border=collapse: collapse; width: 50%; border: blue 1px solid;">
<tr>
<td valign="top">
<p style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;color:#666;line-height:24px;">
<tr style="order: 1px solid #dddddd; text-align: justify; padding: 8px;">
<th style=" border: blue 1px solid;" bgcolor="blue">TEST CASE</th>
<th style=" border: blue 1px solid;" bgcolor="blue"> RESULT
<th>
</tr>
<tr>
<td align="center">
<div class="dropdown"><button onclick="myFunction()" class="dropbtn">login</button>
<div class="dropdown-content"> <a> Go to URL Success </a>
<a> T1 Success </a>
<a> T2 Success </a>
<a> T3 Success </a>
</div>
</div>
</td>
<td align="center">PASS</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
有人可以通过代码告诉我哪里出错吗？
提前致谢。
P.S：这很有效。
function myFunction() {
document.getElementById("myDropDown").classList.toggle("show");
}
因为这不起作用。
function myFunction() {
document.getElementByClassName("dropdown-content").classList.toggle("show");
}
请帮忙。
答案 0 :(得分：-1)
用以下代码替换您的代码：
<html>
<head>
<style>
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.alert_banner {
font-family: Arial, Helvetica, sans-serif;
color: #666;
text-shadow: 1px 1px 0px #fff;
background: #e4e6e7;
margin-bottom: 12px;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.footer_style {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
text-align: center;
line-height: 120%;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
text-shadow: 1px 1px 0px #fff;
}
.table_style a:link {
color: #666;
font-weight: bold;
text-decoration: none;
}
.table_style a:visited {
color: #999999;
font-weight: bold;
text-decoration: none;
}
.table_style a:active,
.table_style a:hover {
color: #bd5a35;
text-decoration: underline;
}
.table_style {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
text-shadow: 1px 1px 0px #fff;
background: #eaebec;
margin-bottom: 12px;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.table_style th {
padding: 21px 25px 22px 25px;
border-top: 1px solid #fafafa;
border-bottom: 2px solid #FF8300;
border-left: 1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.table_style th:first-child {
text-align: left;
padding-left: 20px;
}
.table_style tr:first-child th:first-child {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.table_style tr:first-child th:last-child {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.table_style tr {
text-align: center;
padding-left: 20px;
}
.table_style td:first-child {
text-align: left;
padding-left: 20px;
border-left: 0;
}
.table_style td {
padding: 18px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.table_style tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.table_style tr:last-child td {
border-bottom: 0;
}
.table_style tr:last-child td:first-child {
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.table_style tr:last-child td:last-child {
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.table_style tr:hover td {
background: #F2F2F2;
background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#f0f0f0));
background: -moz-linear-gradient(top, #F2F2F2, #f0f0f0);
}
</style>
</head>
<body>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<center style="background-color:#FFFFFF;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable" style="table-layout:fixed; max-width:100% !important; width:100% !important; min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#F2F2F2" border="0" cellpadding="0" cellspacing="0" width="600" style="border: 1px solid #d3d3d3;">
<tr>
<td align="center" valign="top">
<table bgcolor="#F2F2F2" border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#666;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
[IMAGE]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table class="alert_banner" bgcolor="#ebeef2" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" width="600">
<table align="left" border="0" cellpadding="0" cellspacing="1" width="100%">
<tr>
<td align="middle" valign="middle" width="60">
<table bgcolor="red" border="0" cellpadding="8" cellspacing="0" width="60" style="max-width: 100%;border-radius:3px;">
<tr>
<td align="middle">
<img src="http://images.arubathena.com/sys_notifications_email_image_1202.png" />
</td>
</tr>
</table>
</td>
<td align="left" valign="middle">
<table border="0" cellpadding="8" cellspacing="0" style="max-width: 100%;">
<tr>
<td align="left">
<h3 style="color:#666;line-height:125%;font-size:18px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">
<strong> Test Report</strong>
</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table class="" bgcolor="#f2f2f2" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
Tenant ID :102
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" bgcolor="#F2F2F2">
<div class="footer_style" style="text-align:left;">
<div><span style="color:#666;">$report_body</span></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table style="font-family: arial,sans-serif; border=collapse: collapse; width: 50%; border: blue 1px solid;">
<tr>
<td valign="top">
<p style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;color:#666;line-height:24px;">
<tr style="order: 1px solid #dddddd; text-align: justify; padding: 8px;">
<th style=" border: blue 1px solid;" bgcolor="blue">TEST CASE</th>
<th style=" border: blue 1px solid;" bgcolor="blue"> RESULT
<th>
</tr>
<tr>
<td align="center">
<div class="dropdown"><button onclick="myFunction()" class="dropbtn">login</button>
<div id="myDropdown" class="dropdown-content"> <a> Go to URL Success </a>
<a> T1 Success </a>
<a> T2 Success </a>
<a> T3 Success </a>
</div>
</div>
</td>
<td align="center">PASS</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>