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

207 阅读 0 评论 137 点赞

我是靠谱客的博主可靠白猫，这篇文章主要介绍CSS+jQuery实现简单的折叠菜单，现在分享给大家，希望可以做个参考。

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

复制代码

<!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>

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>