CSS+jQuery实现简单的折叠菜单
更新时间：2016年12月20日 10:14:24 作者：筱葭
这篇文章主要介绍了CSS+jQuery实现简单的折叠菜单的代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>折叠菜单</title>
<style>
body{
background:grey;
font-family:Microsoft Yahei;
color:white;
}
.types a{
text-decoration:none;
color:white;
}
.types ul{
display:none;
}
.files ul{
display:none;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
var span=$(".files").find("span");
var ul=$(".files").find("ul");
span.bind("click",function(){
ul.each(function(){
$(this).css("display","none");
});
$(this).next().css("display","block");
});
});
</script>
</head>
<body>
<ul class="files">
<li class="file">
<span>文件2-1</span>
<ul>
<li class="document"><a href="#">文档2-1-1</a></li>
<li class="document"><a href="#">文档2-1-2</a></li>
</ul>
</li>
<li class="file">
<span>文件2-2</span>
<ul>
<li class="document"><a href="#">菜单2-2-1</a></li>
<li class="document"><a href="#">菜单2-2-2</a></li>
</ul>
</li>
<li class="file">
<span>文件2-3</span>
<ul>
<li class="document"><a href="#">菜单2-3-1</a></li>
<li class="document"><a href="#">菜单2-3-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
以上所述是小编给大家介绍的CSS+jQuery实现简单的折叠菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了jQuery常见的遍历DOM操作,结合实例形式详细分析了针对DOM节点的parent()、parents()、parentsUntil()、find()、eq()、filter()等各种遍历操作相关函数与使用技巧,需要的朋友可以参考下2018-09-09
JQuery 自定义CircleAnimation，Animate方法学习笔记
最近对看了一些JQuery的基础教程，被JQuery深深的吸引住了，以前用过Extjs，看了JQuery不禁感叹，javascript还能这么些，真是太神奇了！2011-07-07
隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素，下面与大家分享下如何利用jQuery插件leanModal建立一个常规模态窗口2013-08-08
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-05-05
这篇文章主要为大家详细介绍了jquery实现聊天机器人，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了浅谈jQuery.easyui的datebox格式化时间的方法,需要的朋友可以参考下2015-06-06
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
本篇文章主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
jQuery.Validate 使用笔记(jQuery Validation范例 )
学习jQuery Validation，于是手写一公共范例，并收藏以便后用,里面附有测试代码，需要的朋友一起来测试。2010-06-06
幻灯片效果通常用于展示相册图片或特色推荐内容。一个漂亮的幻灯片更能吸引访客的注意力。本文里面，收集了15款jquery幻灯片插件，让你的图片展示更漂亮，让你的特色内容更吸引人。2011-04-04
这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-11-11
最新评论