用JQuery写一个简单的菜单手风琴效果

预览


 

Html


 



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>

<script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jqueryplugins2_jqueryform_282" type="text/javascript" class="library" src="/js/sandbox/jquery-plugins/jquery.form-2.82.js"></script>
</head>
<body style="padding:20px;">
<br>
<h1 align="center">手风琴效果</h1>
<br>

<div id="subnav">

<h2>账户中心</h2>
<ul>
<li>基本信息</li>
<li>密码信息</li>
</ul>
<h2>企业用户</h2>
<ul>
<li>基本信息</li>
<li>密码信息</li>
</ul>
<h2>工商财税</h2>
<ul>
<li>基本信息</li>
<li>密码信息</li>
</ul>
<h2>招聘培训</h2>
<ul>
<li>基本信息</li>
<li>密码信息</li>
</ul>

</div>
<h2 style="text-align:center;background:#fff">了解更多访问<a href="http://www.big-culture.com" style="color:color:#fff">www.big-culture.com</a></h2>

</body>
</html>

 

Css


 



*{margin:0;padding:0;}
ul{list-style:none;}
body{font-family:'微软雅黑';font-size:14px;color:#333;}
a{text-decoration:none;color:inherit;}

#subnav{width:200px;margin:0 auto}
#subnav h2{border-bottom: 1px solid #000;padding:0 5px;background-color:#1a6cb9;line-height:46px;font-size:16px;cursor:pointer;color: #fff;text-align: center;

}
#subnav h2.active{background-color:#0f4679;}
#subnav ul{display:none;padding:10px;background-color:#0f4679;color: #fff;text-align: center;

}
#subnav li{line-height:40px;}

Js


 



$(function(){

$('#subnav h2').on('click',function(e){

e.preventDefault();

$(this).siblings('h2').removeClass('active').end().addClass('active');
var $ul=$(this).next();

console.log($ul);

$ul.siblings('ul').slideUp(300);
$ul.slideDown(300);
})

})

未经允许不得转载:绿岛小站 » 用JQuery写一个简单的菜单手风琴效果

赞 (0)

评论 0

评论前必须登录!

登陆 注册