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 相关文章推荐
jquery ajax分页插件的简单实现
Jan 27 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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队列用法实例
2014/11/05 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
angularjs基础教程
2014/12/25 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
C语言编程题
2015/03/09 面试题
函授毕业自我鉴定
2013/12/19 职场文书
二年级数学教学反思
2014/01/21 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
幼师求职信
2014/06/23 职场文书
投标单位介绍信
2015/05/05 职场文书
文书工作总结(范文)
2019/07/11 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
浅析python中特殊文件和特殊函数
2022/02/24 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA