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

最新推荐文章于 2021-12-21 17:12:44 发布

盼儿哥

最新推荐文章于 2021-12-21 17:12:44 发布

阅读量3.3k

点赞数

分类专栏： C# 文章标签： .net jqery dl dd dt 下拉框 html

本文链接：https://blog.csdn.net/qq_17255515/article/details/47616485

版权

这篇博客展示了如何使用jQuery创建一个简洁的下拉列表效果。通过CSS设置样式，点击DT元素展开或隐藏与其相邻的DD元素，实现了一个具有hover高亮效果的新闻列表和最新动态展示。

摘要由CSDN通过智能技术生成

<!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>