<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.list{margin:50px;background:red}
.list1>li{cursor:pointer;}
.nav{padding-left:10px;background:goldenrod}
.nav{display:none;}
.nav li{background:green}
.nav ul{display:none;}
</style>
</head>
<body>
<div class="list">
<ul class="list1">
<li>
菜单1
<ul class="nav">
<li>
菜单1-1
</li>
<li>菜单1-2</li>
<li>菜单1-3</li>
<li>菜单1-4</li>
<li>菜单1-5</li>
<li>菜单1-6</li>
</ul>
</li>
<li>
菜单2
<ul class="nav">
<li>菜单2-1</li>
<li>菜单2-2</li>
<li>菜单2-3</li>
<li>菜单2-4</li>
<li>菜单2-5</li>
<li>菜单2-6</li>
</ul>
</li>
<li>
菜单3
<ul class="nav">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
</ul>
</li>
</ul> </div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(".nav>li").each(function(){
var $li=$(this).index();
var step=10;
$(this).css({"marginLeft":$li*step});
});
$(".list1>li").on("click",function(){
if($(this).find(".nav").css("display")=="none"){
$(this).find(".nav").slideDown();
$(this).find(" .nav>li").animate({"marginLeft":0},1000)
}else{
$(this).find(".nav").slideUp();
$(this).find(".nav>li").each(function(){
var $li=$(this).index();
var step=10;
$(this).animate({"marginLeft":$li*step});
});
}
});
</script>
</html>