首页 > 代码库 > jq手风琴---点击时列表的左边距逐渐减小
jq手风琴---点击时列表的左边距逐渐减小
<!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="http://www.mamicode.com/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>
jq手风琴---点击时列表的左边距逐渐减小
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。