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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
js实现小星星游戏
Mar 23 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python线程池threadpool使用篇
2018/04/27 Python
python生成密码字典的方法
2018/07/06 Python
学习python的前途 python挣钱
2019/02/27 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Java中compareTo和compare的区别
2016/04/12 面试题
《少年王冕》教学反思
2014/04/11 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
选购到合适的激光打印机
2022/04/21 数码科技