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

jquery自制折叠菜单

2016-04-04 09:54 429 查看
利用jquery可以轻松的制作折叠菜单，先来看看效果图吧：



当点击每个标题时会下来，再次点击会滑动收缩，接下来看看具体的实现代码吧：

<!DOCTYPE html>
<html>
<head>
<title>jQuery 自制折叠菜单</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.toggle { width:250px; }
.toggle dl dt { border-top:1px solid #D1D1D1;
border-bottom:1px solid white;background:#E6E9EE; height:40px; width:100%; line-height:40px; font-size:14px; font-weight:bold; color:#2E3442; cursor:pointer;display:block; }
.toggle dl dt:hover{background-color: #3A9EFC;color: white;}
.toggle dl dd { line-height:24px; }
.toggle dl dd ul li {
cursor: pointer;line-height: 30px;font-size: 12px;margin-left: 20px;}
.toggle dl dd ul li:hover{color: #1C63BF; }
#bigcon{margin-top: 95px;float: left;border: 1px solid #CAD1D7;margin-left: 10px;}
#conhd{width: 100%;height: 40px;border-bottom: 1px solid #0057B0;}
#conmain{width: 100%;border: 1px solid #006600;}
</style>
<script type="text/javascript">

$(function(){
$(".toggle dl dd").hide();
$(".toggle dl dt").click(function(){
$(".toggle dl dd").not($(this).next()).slideUp();
$(this).next().slideToggle(500);
});
});

</script>
</head>
<body>
<div class="toggle">
<dl>

<dt>标题一</dt>
<dd>
<ul>
<li>标题一的子标题一</li>
<li>子标题二</li>
<li>标题一的子标题三</li>
</ul>
</dd>

</dl>

<dl>

<dt>标题二</dt>
<dd>
<ul>
<li>标题二的子标题一</li>
<li>子标题二</li>
<li>标题二的子标题三</li>
</ul>
</dd>

</dl>

<dl>

<dt>标题三</dt>
<dd>
<ul>
<li>标题三的子标题一</li>
<li>子标题二</li>
<li>标题三的子标题三</li>
</ul>
</dd>

</dl>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航