CSS+jQuery实现简单的折叠菜单


Posted in Javascript onDecember 20, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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实现简单的折叠菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
jQuery常见的选择器及用法介绍
Dec 20 #Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 #Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 #Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 #Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python可变参数用法实例分析
2017/04/02 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
幼儿教师求职信
2014/05/24 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers