ここに示すように、html コードに 4 つのドロップダウン メニューがあります。ページの作成時に、要素ドロップダウン ボタンのドロップダウン メニューは #dd4 ではなく #dd3 にする必要があります。ただし、間違ったドロップダウン メニューが表示されることがあります。これについて何か助けはありますか？以下のコードと @ 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をまったく初めて使用します。誰かが私に素晴らしい提案をしてくれることを願っています。