abstract：頁(yè)面采用div+li+jq實(shí)現(xiàn) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>垂直手風(fēng)琴導(dǎo)航</title&g
頁(yè)面采用div+li+jq實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>垂直手風(fēng)琴導(dǎo)航</title>
<link rel="stylesheet" type="text/css" href="static/css/style4.css">
<script src="static/js/jquery.js"></script>
<script>
$(function(){
$('.two').css('display', 'none') //運(yùn)用樣式表來(lái)選取
//$('.two').hide();//運(yùn)用JQ自帶的函數(shù)
var one=$('.one')
var two=$('.two')
$('.one').each(function(i){
$(this).click(function(){
if($(two[i]).css('display')=='none'){
$(this).addClass('link')
$(two[i]).slideDown(400)
}else{
$(this).removeClass('link')
$(two[i]).slideUp(400)
}
})
})
})
</script>
</head>
<body>
<div>
<ul>
<li>
<div class="one ">
個(gè)人中心
</div>
<ul>
<li><a href="#">我的信息</a></li>
<li><a href="#">我的課程</a></li>
<li><a href="#">我的優(yōu)惠</a></li>
<li><a href="#">我的行程</a></li>
</ul>
</li>
<li>
<div>
商品類(lèi)型
</div>
<ul>
<li><a href="#">我的信息</a></li>
<li><a href="#">我的課程</a></li>
<li><a href="#">我的優(yōu)惠</a></li>
<li><a href="#">我的行程</a></li>
</ul>
</li>
<li>
<div>
幫助中心
</div>
</li>
</ul>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #1BAAE2;
font-size: 12px;
}
.nav{
width:250px;
margin:20px auto 0px;
border-top:4px solid #1BAAE2;
border-left:1px solid #1BAAE2;
border-bottom:3px solid #1BAAE2;
border-right:1px solid #1BAAE2;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.nav .one{
height:40px;
line-height:40px;
text-align: center;
font-size:18px;
border-bottom:1px solid #1baae2;
cursor: pointer;
}
.link{
color:#fff;
background:#434346;
}
.nav .two li{
height:35px;
line-height:35px;
text-align: center;
font-size:16px;
background: #ccc;
border-bottom:1px dotted #1baae2;
}
.nav .two li a{
font-size:16px;
}
Correcting teacher：韋小寶Correction time：2019-02-12 16:37:36
Teacher's summary：不錯(cuò)不錯(cuò) 寫(xiě)的很棒 ！ 看來(lái)你對(duì)jQuery掌握的還是很不錯(cuò)的！課后沒(méi)事要記得多練習(xí)練習(xí)哦 ！