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

jQuery 折叠菜单

2017-10-11 08:56 197 查看

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码，主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧。

效果图：

源码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery 折叠菜单</title>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<style type="text/css">
* { margin:0px; padding:0px; }
body {font-size:14px; }
ul, li, h1, div{ list-style:none; padding:0px; margin:0px; }
.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00;background-color:#FFFFFF; overflow:hidden; }
.toggle { width:450px; margin:20px auto; }
.toggle dl dt { height:40px; width:450px;line-height:40px;background: #b3d4fc; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
.toggle dl dd { padding-left:10px; line-height:24px;}
.toggle dl dd h2 { font-size:15px; }
.toggle dl dd ul { padding-bottom:12px; }
.toggle dl dd ul li { list-style:none; }
</style>
<script type="text/javascript">
$(function(){
$(".toggle dl dd").hide();
$(".toggle dl dt").click(function(){
$(".toggle dl dd").not($(this).next()).hide();
$(".toggle dl dt").not($(this).next()).removeClass("current");
$(this).next().slideToggle(500);
$(this).toggleClass("current");
});
});
</script>
</head>
<body>
<div class="content">
<div class="toggle">
<dl>
<dt>项目一</dt>
<dd>
<ul>
<li>项目一、一</li>
<li>项目一、二</li>
<li>项目一、三</li>
</ul>
</dd>
<dt>项目二</dt>
<dd>
<ul>
<li>项目二、一</li>
<li>项目二、二</li>
<li>项目二、三</li>
</ul>
</dd>
<dt>项目三</dt>
<dd>
<ul>
<li>项目三、一</li>
<li>项目三、二</li>
<li>项目三、三</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>

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

标签： 源码 javascript jquery

相关文章推荐

新的分享

章节导航