完成使用无序列表完成手风琴导航菜单案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴菜单</title>
<link rel="stylesheet" href="./static/css/style.css">
<script type="text/javascript" src = "./static/js/jquery.js"></script>
</head>
<script type="text/javascript">
$(function() {
$('.active').next().slideDown(400);
$('.menu_one').click(function(){
if($(this).attr('class') =='menu_one active'){
$(this).next().slideUp(400)
$(this).attr('class','menu_one');
}else{
$('.active').next().slideUp(400);
$('.active').attr('class','menu_one');
$(this).attr('class','menu_one active');
$(this).next().slideDown(400);
}
})
})
</script>
<body>
<ul>
<li class="menu_one active">php开发</li>
<ul>
<li>php图文教程</li>
<li>php视频教程</li>
<li>php手册教程</li>
<li>php实战教程</li>
<li>php原生手册</li>
<li>php实战教程</li>
<li>phpstudy工具</li>
</ul>
<li>前端开发</li>
<ul>
<li>HTML/CSS</li>
<li>Bootstrap</li>
<li>foundation</li>
<li>JavaScript</li>
</ul>
<li>服务端开发</li>
<ul>
<li>PHP</li>
<li>Python</li>
<li>Django</li>
<li>Linux</li>
</ul>
<li>移动开发</li>
<ul>
<li>Android</li>
<li>Swift</li>
<li>Mobile</li>
<li>ios</li>
</ul>
<li>数据库</li>
<ul>
<li>MySQL</li>
<li>SQL</li>
<li>SQLite</li>
<li>Memcached</li>
</ul>
<li>服务器运维</li>
<ul>
<li>常用软件</li>
<li>FileZilla</li>
<li>PhpStorm</li>
<li>Server</li>
</ul>
<li>在线工具箱</li>
<ul>
<li>MD5加密工具</li>
<li>字数统计工具</li>
<li>在线去重工具</li>
<li>火星文转换器</li>
</ul>
<li>常用类库</li>
<ul>
<li>分页类库</li>
<li>图片类库</li>
<li>验证码类库</li>
<li>二维码类</li>
</ul>
</ul>
</body>
</html>*{margin:0px;padding: 0px;}
.menu{width:200px;
height: 600px;
background: #0C1014;
margin: 20px auto;
color: #C4C6C8;
}
.menu>li{
list-style: none;
width: 100%;
margin-left: 60px;
height: 30px;
line-height: 30px;
}
.menu ul{
background: #3E4655;
color: #fff;
font-size: 12px;
}
.menu ul li{
height: 30px;
line-height: 30px;
text-align: center;
}
.menu ul li:hover{
background: rgba(255,255,255,0.3);
cursor:pointer;
}
.menu_one{height: 20px;
line-height: 20px;
cursor: default;
}
.menu_two{
display: none;
}
对手风琴下拉和收缩各功能完善，当点击闭合项时，将原来打开的项进行闭合并打开当然选中项的子菜单