abstract：<!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開(kāi)發(fā)</li>
<ul>
<li>php圖文教程</li>
<li>php視頻教程</li>
<li>php手冊(cè)教程</li>
<li>php實(shí)戰(zhàn)教程</li>
<li>php原生手冊(cè)</li>
<li>php實(shí)戰(zhàn)教程</li>
<li>phpstudy工具</li>
</ul>
<li>前端開(kāi)發(fā)</li>
<ul>
<li>HTML/CSS</li>
<li>Bootstrap</li>
<li>foundation</li>
<li>JavaScript</li>
</ul>
<li>服務(wù)端開(kāi)發(fā)</li>
<ul>
<li>PHP</li>
<li>Python</li>
<li>Django</li>
<li>Linux</li>
</ul>
<li>移動(dòng)開(kāi)發(fā)</li>
<ul>
<li>Android</li>
<li>Swift</li>
<li>Mobile</li>
<li>ios</li>
</ul>
<li>數(shù)據(jù)庫(kù)</li>
<ul>
<li>MySQL</li>
<li>SQL</li>
<li>SQLite</li>
<li>Memcached</li>
</ul>
<li>服務(wù)器運(yùn)維</li>
<ul>
<li>常用軟件</li>
<li>FileZilla</li>
<li>PhpStorm</li>
<li>Server</li>
</ul>
<li>在線工具箱</li>
<ul>
<li>MD5加密工具</li>
<li>字?jǐn)?shù)統(tǒng)計(jì)工具</li>
<li>在線去重工具</li>
<li>火星文轉(zhuǎn)換器</li>
</ul>
<li>常用類庫(kù)</li>
<ul>
<li>分頁(yè)類庫(kù)</li>
<li>圖片類庫(kù)</li>
<li>驗(yàn)證碼類庫(kù)</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;
}
對(duì)手風(fēng)琴下拉和收縮各功能完善，當(dāng)點(diǎn)擊閉合項(xiàng)時(shí)，將原來(lái)打開(kāi)的項(xiàng)進(jìn)行閉合并打開(kāi)當(dāng)然選中項(xiàng)的子菜單
Correcting teacher：查無(wú)此人Correction time：2019-03-16 09:12:47
Teacher's summary：完成的不錯(cuò)。手風(fēng)琴效果很常用，不管是電腦端還是手機(jī)端，都需要這樣效果。繼續(xù)加油