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中的constructor和prototype
Apr 07 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
微信小程序实现多张图片上传功能
Nov 18 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+DBM的同学录程序(3)
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Python入门篇之列表和元组
2014/10/17 Python
PHP统计代码行数的小代码
2019/09/19 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
九年级数学教学反思
2014/02/02 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
一文搞懂Java中的注解和反射
2022/06/21 Java/Android