【发布时间】：2013-11-09 16:34:19
【问题描述】：
我的 html 代码中有 4 个下拉菜单，如下所示。在页面创建时，因子下拉按钮的下拉菜单应为#dd3 而不是#dd4。但是我碰巧得到了错误的下拉菜单来显示。对此有什么帮助吗？我已经添加了下面的代码和@jsfiddle:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#container2{
position: relative;
padding-top: :123px;
}
</style>
<title>Google Top Apps Trending</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//var d = new Date();
//var year = ["2013", "2014"];
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var factors1 = new Array();
factors1 = ["Version","Architecture","SDK Version","Target SDK","Phone to Tablet","Resolution"];
for (i = 0; i < factors1.length; i++) {
$("#dd3").append("<li><a href='#'>" + factors1[i] + "</a></li>");
}
var factors2 = new Array();
var factors2 = ["IA Architecture Usage","Phone to Tablet"];
for (i = 0; i < factors2.length; i++) {
$("#dd4").append("<li><a href='#'>" + factors2[i] + "</a></li>");
}
for (i = 0; i < monthNames.length; i++) {
$("#dd1").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
$("#dd2").append("<li><a href='#'>" + monthNames[i] + "</a></li>");
}
$("#dd1 li a").click(function () {
var selText = $(this).text();
$("#monthFrom").text(selText);
});
$("#dd2 li a").click(function () {
var selText = $(this).text();
$("#monthTo").text(selText);
});
$("#dd3 li a").click(function () {
var selText = $(this).text();
$("#aspect").text(selText);
});
$("#dd4 li a").click(function () {
var selText = $(this).text();
$("#monthlyaspect").text(selText);
});
$("#monthly").click(function(){
$("#monthTo").hide();
$("#monthFrom").text("Choose a Month");
$("#aspect").hide();
$("#monthlyaspect").show();
});
$("#trend").show(function() {
$("#aspect").show();
$("#monthlyaspect").hide();
});
$("#monthly").show(function() {
$("#aspect").hide();
$("#monthlyaspect").show();
});
$("#trend").click(function(){
$("#aspect").show();
$("#monthTo").show();
$("#monthFrom").text("Choose Month 1");
$("#monthlyaspect").hide();
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h3>Google App Analytics</h3>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#" id="monthly" >Monthly Analysis</a></li>
<li><a href="#" id="trend">Trend Analyser</a></li>
</ul>
</div>
</div>
<div id="container1" class="well carousel-search hidden-phone">
<div class="btn-group"> <a id='monthFrom' class="btn dropdown-toggle btn-select1" data-toggle="dropdown" href="#" >Choose Month 1 <span class="caret"></span></a>
<ul id="dd1" class="dropdown-menu"></ul>
</div>
<div class="btn-group"> <a id='monthTo' class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#" >Choose Month 2 <span class="caret"></span></a>
<ul id="dd2" class="dropdown-menu"></ul>
</div>
<div class="btn-group"> <a id='aspect' class="btn dropdown-toggle btn-select3" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>
<ul id="dd3" class="dropdown-menu">
</ul>
</div>
<div class="btn-group"> <a id='monthlyaspect' class="btn dropdown-toggle btn-select4" data-toggle="dropdown" href="#" >Factor<span class="caret"></span></a>
<ul id="dd4" class="dropdown-menu">
</ul>
</div>
<input id="btn1" type="submit" class="btn" value="Analyze" style="float: right;" />
</div>
</div>
</div>
</div>
</div>
</div>
当页面打开时，ID 为“#dd4”的下拉菜单应该被隐藏。它恰好显示并且项目的大小（下拉按钮）也在不断变化。有没有办法我可以修复下拉按钮的大小。对不起，我对 javascript 完全陌生。希望有人能给我一个很好的建议。
【问题讨论】：
标签： javascript jquery html css drop-down-menu