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自定义事件及事件交互原理概述(二)
Feb 01 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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使用ODBC连接数据库的方法
2015/07/18 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Django框架表单操作实例分析
2019/11/04 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
中学教师管理制度
2014/01/14 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
门店业绩提升方案
2014/06/08 职场文书
单位接收函格式
2015/01/30 职场文书
2015年超市工作总结范文
2015/05/26 职场文书