我正在尝试在TechCrew 网站的中央 div 框右侧添加一个按钮。这将是一个小齿轮图标。它将有一个下拉菜单，其中包含显示其他信息的选项。我想我做对了，但它不起作用。帮助这个 Codecademy 菜鸟...检查一下：
的HTML
<head>
<script src="jQuery/jquery-1.9.1.js"></script>
<script src="jQuery/ui/jquery.ui.effect.js"></script>
<script src="jQuery/ui/jquery.ui.effect-scale.js"></script>
<script src="jQuery/ui/jquery.ui.effect-shake.js"></script>
<script src="jQuery/ui/jquery.ui.effect-slide.js"></script>
<script src="jQuery/ui/jquery.ui.core.js"></script>
<script src="jQuery/ui/jquery.ui.widget.js"></script>
<script src="jQuery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="tcn_main.js"></script>
</head>
<body>
<div id="sidebox"><h2>Advisory Board</h2><!--This is the extra info that will pop up-->
<ul>
<li>Name1</li>
<li>Name2</li>
</ul>
</div>
<a href="#" class="jqbutton {icon: ui-icon-gear}">Show additional information</a><!--gear icon, text gets hidden-->
<ul id="menu"> <!--Dropdown menu inside the gear-->
<li class="ui-state-disabled"><a href="#">Who is advising you guys?</a></li>
</ul>
</body>
CSS
@import "jQuery/themes/base/jquery.ui.base.css";
@import "jQuery/themes/base/jquery.ui.theme.css";
#sidebox{
/*Let's have it start hidden (display:none) and use JavaScript to call it into existance upon request */
display:none;
float:left;
margin-right:auto;
margin-top:25%;
padding:5px;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
box-shadow: 0 0 30px 5px #999;
background-color:#fcde3f;
color:#be2226;
overflow:hidden;
min-width:200px;
max-width:500px;
}
#sidebox h2{
text-align:center;
}
.ui-menu {
width: 150px;
}
#menu{
display:none;
}
#options{
}
JavaScript
$(document).ready(function(){
$('#menu').menu();
$(".jqbutton").each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
$('.jqbutton').click(function(){
$('#menu').fadeIn('slow');
});
$('#menu a').click(function(){
$('#sidebox').fadeIn('slow');
});
});