0
我有4下拉菜单在我的HTML代码中显示在这里。在页面创建时，因子下拉按钮的下拉菜单应该是＃dd3而不是＃dd4。不过，我碰巧得到错误的下拉菜单来显示。对此有何帮助？我加入以下代码，然后@jsfiddle：错误的下拉菜单上的页面创建 - html css
<!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。希望有人能给我一个很好的建议。