CSS+jQuery实现简单的折叠菜单
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要介绍了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实现简单的折叠菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：JS高级运动实例分析
下一篇：jQuery常见的选择器及用法介绍