您的位置：首页 > Web前端 > JQuery

DL DD DT 下拉列表(jquery)-代码很简洁

2015-08-13 18:04 525 查看

<!DOCTYPE html>
<html >
<head>
<title></title>
<script type="text/javascript" src="jquery1.7.js"></script>
<style type="text/css">
dl dt {background:#5f9be3;color:#fff;display: block; font-weight:bold; text-align: center;padding: 5px; width:100px;}
dl dd {margin:2px 0px;padding:5px 5px; width: 100px;}
dl dd:hover{ background-color: #2c2c23; }
</style>
<script type="text/javascript">
$(function(){
$("dl  dd").hide();
$("dt").click(function(){
if ($(this).attr("state")=="show") {
$(this).nextUntil("dt").hide(500)
$(this).attr("state","hide");
}else{
$(this).nextUntil("dt").show(500);
$(this).attr("state","show");
}
});
});
</script>
</head>
<body>
<dl>
<dt>新闻列表 </dt>
<dd>1.Squall Li</dd>
<dd>2.Squall Li</dd>
<dd>3.Squall Li</dd>
<dt>最新动态</dt>
<dd>1.XX大声说</dd>
<dd>2.DD大声说</dd>
<dd>3.ff大声说</dd>
</dl>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航