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

 更新时间:2016年12月20日 10:14:24   作者:筱葭  
这篇文章主要介绍了CSS+jQuery实现简单的折叠菜单的代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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实现简单的折叠菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://blog.csdn.net/zhouziyu2011/article/details/53759072

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 关于Jquery中的事件绑定总结

    关于Jquery中的事件绑定总结

    下面小编就为大家带来一篇关于Jquery中的事件绑定总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jQuery中remove()方法用法实例

    jQuery中remove()方法用法实例

    这篇文章主要介绍了jQuery中remove()方法用法,以三个不同的实例形式分别演示了remove()方法删除元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery实现点击文字可编辑并修改保存至数据库

    jquery实现点击文字可编辑并修改保存至数据库

    网上的方法只有点击文字编辑并保持,但是没有完整的代码写怎么保存到数据库,本例用一条sql语句保存到数据库
    2014-04-04
  • jQuery实现返回顶部功能适合不支持js的浏览器

    jQuery实现返回顶部功能适合不支持js的浏览器

    a标签指向锚点top,可以在顶部防止一个a name=top的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了
    2014-08-08
  • StringTemplate遇见jQuery冲突的解决方法

    StringTemplate遇见jQuery冲突的解决方法

    最近在做一个流程引擎,现着手于自定义模板的处理。设计在模板中所有的数据都将与字段对应,采用xml结构序列化作为流程持久化机制。
    2011-09-09
  • jQuery前台数据获取实现代码

    jQuery前台数据获取实现代码

    jQuery前台数据获取实现代码,需要的朋友可以参考下。
    2011-03-03
  • Jquery鼠标放上去显示全名的实现方法

    Jquery鼠标放上去显示全名的实现方法

    下面小编就为大家带来一篇Jquery鼠标放上去显示全名的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jQuery事件注册的实现示范

    jQuery事件注册的实现示范

    jQuery为我们提供了方便的事件注册机制,它的优点,操作简单,且不用担心事件覆盖等问题。缺点,普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法
    2022-07-07
  • jQuery表单设置值的方法

    jQuery表单设置值的方法

    这篇文章主要为大家详细介绍了jQuery表单设置值的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • ASP.NET中AJAX 调用实例代码

    ASP.NET中AJAX 调用实例代码

    最近在ASP.NET中做了一个AJAX调用 : Client端先从ASP.NET Server后台取到一个页面模板,然后在页面初始化时再从Server中取一些相关数据以实现页面模板的动态显示
    2012-05-05

最新评论