我的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的新手。希望有人能给我一个很好的建议。
答案 0 :(得分：0)
在jQuery中，使用hide（）方法隐藏某些内容，然后使用show（）
显示它例如隐藏＃dd4下拉列表
$('#dd4').hide();
如果你想在隐藏＃dd4时做些事情
$('#dd4').hide(function(){
$('#dd3').show();//to show the #dd3 dropdown on #dd4 hidden
});
要显示，请在代码中替换show！
要修复下拉列表大小，您可以使用javascript，但最佳做法告诉我们在CSS中执行此操作！因此，请在标记内添加此css，如下所示
<style type="text/css">
/*------*/
ul.dropdown-menu,ul.dropdown-menu li{
width:200px;//replace with the size you wish
max-width:200px;//replace with the size you wish
}
</style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#container2{
position: relative;
padding-top: :123px;
}
ul.dropdown-menu,ul.dropdown-menu li{
width:200px;//replace with the size you wish
max-width:200px;//replace with the size you wish
}
</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);
});
$("#dd4).hide();//new line
$("#monthly").click(function(){
$("#monthTo").hide();
$("#monthFrom").text("Choose a Month");
$("#aspect").hide();
$("#monthlyaspect").show();
$("#dd4").show();////new line
});
$("#trend").show(function() {
$("#aspect").show();
$("#monthlyaspect").hide();
$("#dd4").hide();//new line
});
$("#monthly").show(function() {
$("#aspect").hide();
$("#monthlyaspect").show();
$("#dd4").show();//new line
});
$("#trend").click(function(){
$("#aspect").show();
$("#monthTo").show();
$("#monthFrom").text("Choose Month 1");
$("#monthlyaspect").hide();
$("#dd4").hide();//new line
});
});
</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>
PS：我将我的行评为“//新行”，这样你可以删除它，如果你不需要显示/隐藏dd4或者你也可以将dd4改为dd3