好的，谢谢这里的人们，我几乎完成了我对3岁儿童的标准下降。我知道有可能缩短和简化我的代码，所以任何指针都会很棒。这是我的所有代码，jsfiddle将位于底部：
哦，在我忘记之前有没有办法可以让动画变得平滑？像wait（）那样会让滑动等待直到滑动完成的交易？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$('a#1').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#1').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#1').slideToggle(300);
}
});
$('a#2').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#2').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#2').slideToggle(300);
}
});
$('a#3').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#3').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#3').slideToggle(300);
}
});
$('a#4').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#4').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#4').slideToggle(300);
}
});
}）;
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li><a href="#">Link l1</a></li>
<li><a href="#">Link l2</a></li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li><a href="#">Link r1</a></li>
<li><a href="#">Link r2</a></li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >HOME</a></li>
<li><a id="1" href="#" >ABOUT</a>
<ul id="1">
<li><a href="#">test1.2</a></li>
<li><a href="#">test1.3</a></li>
<li><a href="#">test1.1</a></li>
</ul>
</li>
<li><a id="2"href="#">Work</a>
<ul id="2">
<li><a href="#">test1x.2</a></li>
<li><a href="#">test1x.3</a></li>
<li><a href="#">test1x.1</a></li>
</ul>
</li>
<li><a id ="3" href="#">Clients</a>
<ul id="3">
<li><a href="#">test2.2</a></li>
<li><a href="#">test2.3</a></li>
<li><a href="#">test1.2</a></li>
</ul>
</li>
<li><a id="4"href="#">Contact</a>
<ul id="4">
<li><a href="#">test3.2</a></li>
<li><a href="#">test3.3</a></li>
<li><a href="#">test3.1</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width:100%;
height:40px;
background: #fff;
border-bottom: solid thin #c8c8c8;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
很抱歉，如果它像傻瓜一样编码（我还在使用我的训练轮）。
谢谢
C
答案 0 :(得分：1)
你可以试试这个：
$(document).ready(function () {
$('#midnav li a').on('click', function(event){
event.preventDefault();
$('#midnav li ul').slideUp(300);
var ul = $(this).parent().find('ul');
if(ul.is(':visible')){
ul.slideUp(300);
}else{
ul.slideDown(300);
}
});
});
答案 1 :(得分：1)
首先，对于在各自子菜单上触发slideToggle的a标记，您应该使用CSS类而不是ID。此外，有效HTML页面中的ID应该是唯一的，并且对于不同的元素使用相同的id“1”，“2”等。更重要的是，通过使用类，您不需要单独绑定所有锚标记的onclick事件，这样可以节省大量代码; - ）
这是更新的小提琴：http://jsfiddle.net/XN4vf/3/
相关代码如下：
$("a.slide").on('click', function(e){
e.preventDefault();
$(this).parent().siblings().find("ul:visible").slideUp();
$(this).next("ul").slideToggle(300);
});
一旦为a标签提供了一个名为“幻灯片”或类似的类，您就可以重写事件回调以首先隐藏/滑动所有属于当前点击的标签兄弟姐妹的子菜单< / strong>即可。之后，您触发slideToggle()以显示或隐藏当前子菜单。这样，如果您首先单击ABOUT然后再单击ABOUT（并触发切换），则单击WORK，然后子菜单会正确更改。