サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手風(fēng)琴菜單</title> <link rel="stylesheet" href=&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手風(fēng)琴菜單</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開發(fā)</li>
<ul>
<li>php圖文教程</li>
<li>php視頻教程</li>
<li>php手冊教程</li>
<li>php實戰(zhàn)教程</li>
<li>php原生手冊</li>
<li>php實戰(zhàn)教程</li>
<li>phpstudy工具</li>
</ul>
<li>前端開發(fā)</li>
<ul>
<li>HTML/CSS</li>
<li>Bootstrap</li>
<li>foundation</li>
<li>JavaScript</li>
</ul>
<li>服務(wù)端開發(fā)</li>
<ul>
<li>PHP</li>
<li>Python</li>
<li>Django</li>
<li>Linux</li>
</ul>
<li>移動開發(fā)</li>
<ul>
<li>Android</li>
<li>Swift</li>
<li>Mobile</li>
<li>ios</li>
</ul>
<li>數(shù)據(jù)庫</li>
<ul>
<li>MySQL</li>
<li>SQL</li>
<li>SQLite</li>
<li>Memcached</li>
</ul>
<li>服務(wù)器運維</li>
<ul>
<li>常用軟件</li>
<li>FileZilla</li>
<li>PhpStorm</li>
<li>Server</li>
</ul>
<li>在線工具箱</li>
<ul>
<li>MD5加密工具</li>
<li>字數(shù)統(tǒng)計工具</li>
<li>在線去重工具</li>
<li>火星文轉(zhuǎn)換器</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;
}
對手風(fēng)琴下拉和收縮各功能完善，當(dāng)點擊閉合項時，將原來打開的項進行閉合并打開當(dāng)然選中項的子菜單
添削の先生：查無此人添削時間：2019-03-16 09:12:47
先生のまとめ：完成的不錯。手風(fēng)琴效果很常用，不管是電腦端還是手機端，都需要這樣效果。繼續(xù)加油