jquery纵向菜单的问题


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单</title>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">首页</a>
</li>
<li class="main">
<a href="#">人员管理</a>
<ul>
<li><a href="#">人员管理</a></li>
</ul>
</li>
<li class="main">
<a href="#">售点管理</a>
<ul>
<li><a href="#">售点管理</a></li>
</ul>
</li>
<li class="main">
<a href="#">报表统计</a>
<ul>
<li><a href="#">售点按城市统计 </a></li>
</ul>
</li>
<li class="main">
<a href="#">用户管理</a>
<ul>
<li><a href="#">平台角色管理 </a></li>
</ul>
</li>
<li class="main">
<a href="#">系统管理</a>
<ul>
<li><a href="#">企业管理 </a></li>
</ul>
</li>
<li class="main">
<a href="#">订单管理</a>
<ul>
<li><a href="#">订单管理 </a></li>
</ul>
</li>

</ul>
</body>
</html>
menu.cssbody{
background-color: #F6F9FE;
}
ul,li{
/*清楚UL,LI的默认样式*/
list-style: none;
}
ul{
/*清除子菜单缩进值*/
padding: 0px;
margin: 0px;
}
.main{

background-image: url(../img/tt_03.gif);
background-repeat: repeat-x;
width: 160px;
}
.main a{
color: #397BCE;
background-image: url(../img/left_7_03.gif);
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a{
color: black;
background-image: none;
}
.main ul{
display: none;
}
li{
background-color:#E8F2FE; 
}
a{
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
display: block;
/*IE6下a标签充满整个区域*/
display: inline-block;
width: 140px;
padding-top: 3px;
padding-bottom: 3px;
}menu.js$(function(){
$(".main>a").click(function() {
//选中UL
var ulNode=$(this).next("ul");
ulNode.slideToggle(600); 
ulNode.css("background-image","url('img/menu-fouce-down_03.jpg')");
});
});问下 如何让菜单 实现只能展开一列 而不能展开多列。

解决方案 »

  1.   

    http://js.alixixi.com/    上面有你要的效果 你搜搜看 
      

  2.   

    $(function(){
        $(".main>a").click(function() {
            
            $(this).parent().parent().find("ul").hide();
            var ulNode=$(this).next("ul");
            ulNode.slideToggle(600); 
            ulNode.css("background-image","url('img/menu-fouce-down_03.jpg')");
        });
    });
      

  3.   

    $(function(){
        $("ul:gt(0)").hide();
        $(".main>a").click(function() {
            
            $(this).parent().parent().find("ul").hide();
            var ulNode=$(this).next("ul");
            ulNode.slideToggle(600); 
            ulNode.css("background-image","url('img/menu-fouce-down_03.jpg')");
        });
    });