![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list>dd>dl>dd").hide();
$.each($("#list>dd>dl>dt"), function(){
$(this).click(function(){
$("#list>dd>dl>dd ").not($(this).next()).slideUp();
$(this).next().slideToggle(500);
});
});
});
</script>
<style type="text/css">
dl,dd,dt,ul,li{ margin:0; padding:0; list-style:none; color:#333;}
#list{ width:300px; text-align:center; font-size:12px;border-left:1px solid #dedede;border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
#list dd dl dt{ border-top:1px solid #dedede; background:#f2f2f2; height:25px; line-height:25px; font-weight:bold;}
#list ul{ background:#f9f9f9; }
#list li{ border-top:1px solid #efefef; line-height:25px;}
</style>
</head>
<body>
<dl id="list">
<dd>
<dl>
<dt>终南望余雪</dt>
<dd>
<ul>
<li>终南阴岭秀</li>
<li>积雪浮云端</li>
<li>林证明霁色</li>
<li>城中增暮寒</li>
</ul>
</dd>
</dl>
</dd>
<dd>
<dl>
<dt>江雪</dt>
<dd>
<ul>
<li>千山鸟飞绝</li>
<li>万径人踪灭</li>
<li>孤舟蓑笠翁</li>
<li>独钓寒江雪</li>
</ul>
</dd>
</dl>
</dd>
<dd>
<dl>
<dt>寻隐者不遇</dt>
<dd>
<ul>
<li>松下问童子</li>
<li>言师采药去</li>
<li>只在此山中</li>
<li>云深不知处</li>
</ul>
</dd>
</dl>
</dd>
</dl>
</body>
</html>
浙公网安备 33010602011771号