【发布时间】：2022-02-16 08:57:13
【问题描述】：
所以我在表格的末尾添加了一个下拉按钮，但由于某种原因，当我单击它时，没有任何内容会下拉。我的控制台上也看不到任何错误。我的 CSS 中有什么东西可能会阻止它工作吗？
HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="public/stylesheets/grayscale.css">
<title>tech</title>
</head>
<body>
<div id="Tech" class="header">
<center><img src="public/images/test.png" id='Logo' alt="Logo">
</center>
</div>
<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<fieldset>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<div id="filedrag">
<img src="public/images/upload3.png" alt="draganddrop">
</div>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
</div>
</fieldset>
</form>
<div id="messages">
</div>
<table id="data-table" class="container">
<thead>
<tr>
<th>
<h3>Video</h3>
</th>
<th>
<h3>Original Size</h3>
</th>
<th>
<h3>Compressed Size</h3>
</th>
<th>
<h3>Compressed rate</h3>
</th>
<th>
<h3>Savings</h3>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Video1 File Name</td>
<td>Original File Size</td>
<td>6369</td>
<td>01:32:50</td>
<td>450</td>
<td>
<div class="container">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Compress</a></li>
<li class="disabled"><a href="#">Download</a></li>
<li class="active"><a href="#">Delete</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>Video 2 File Name</td>
<td>Original File Size</td>
<td>10437</td>
<td>00:51:22</td>
<td>450</td>
<td>
<div class="container">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Compress</a></li>
<li class="disabled"><a href="#">Download</a></li>
<li class="active"><a href="#">Delete</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>Video 3 File Name</td>
<td>Original File Size</td>
<td>5327</td>
<td>00:24:34</td>
<td>450</td>
<td>
<div class="container">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Compress
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Compress</a></li>
<li class="disabled"><a href="#">Download</a></li>
<li class="active"><a href="#">Delete</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
<script src="public/js/filedrag.js"></script>
</html>
CSS 代码：
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color:#A7A1AE;
background-color:#1F2739;
}
.data-table{
margin-top: 250px;
}
#filedrag{
text-align: center;
border-radius: 7px;
cursor: default;
}
#filedrag.hover{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
#title{
text-align: center;
}
#logo{
float: right;
}
.header img {
float:left;
border: 5px;
padding:5px;
width: 4em;
height: 4em;
border-radius: 10px;
}
.header h1 {
position:relative;
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: left;
color: #FFFFFF;
}
h1 {
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: center;
color: #FFFFFF;
}
h2 {
font-size:1em;
font-weight: 300;
text-align: center;
display: block;
line-height:1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
h3{
color: white;
}
h4{
text-align: center;
font-size: 2em;
}
#Register
{
margin-left: 750px;
margin-top: 27px;
}
.btn-update{
position: absolute;
bottom: 0;
margin-bottom: 300px;
margin-left: -65px;
}
.hideshow{
position: absolute;
bottom: 0;
margin-bottom: 300px;
margin-left: -65px;
}
.blue { color: #185875; }
.yellow { color: #FFF842; }
.container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: #185875;
}
.container td {
font-weight: normal;
font-size: 1em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
text-align: left;
overflow: hidden;
width: 80%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td, .container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left:2%;
}
/* Background-color of the odd rows */
.container tr:nth-child(odd) {
background-color: #323C50;
}
/* Background-color of the even rows */
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
}
.container_graph {
width: 80%;
margin: 15px auto;
margin-top: 175px;
}
.container td:first-child { color: #FB667A; }
.container tr:hover {
background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
-moz-box-shadow: 0 6px 6px -6px #0E1119;
box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
/*background-color: #FFF842;*/
/*color: #403E10;*/
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}
【问题讨论】：
标签： jquery html css twitter-bootstrap