????：<!DOCTYPE html><html><head><meta charset="utf-8"><title>手風(fēng)琴導(dǎo)航</title><style>dl{width:150px;}dl,dd{margin:0;}dt{ background:gray; font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手風(fēng)琴導(dǎo)航</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
background:gray;
font-size:14px;
padding:2px;
margin:2px;
}
dt{color:#FFF;}
dd a{
color:#000;
font-size:12px;
}
ul{
list-style:none;
padding:2px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
</head>
<body>
<dl>
<dt><a href="#">導(dǎo)航一</a></dt>
<dd>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
</ul>
</dd>
<dt><a href="#">導(dǎo)航二</a></dt>
<dd>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
</ul>
</dd>
<dt><a href="#">導(dǎo)航三</a></dt>
<dd>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
</ul>
</dd>
</dl>
</body>
</html>
?? ???：天蓬老師?? ??：2019-04-12 09:19:13
???? ??：其實jQuery這類的動畫操作, 現(xiàn)在已經(jīng)有成熟的css3解決方案, 有空可以了解一下