小提示
  • Ctrl+/代码提示(需IE11)
  • F11键放大 ESC键缩小
  • PgUp上页 PgDn下页
推荐代码
运行代码 缩小
    • 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
    • 1.7.3 1.7.2 1.7.1.0 1.7.0.0
    • 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
    • 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
    • 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
    • core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
    • 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
    • 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6
    • 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
    • 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
    • 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
​x
 
1
<html>
2
    <head>
3
        <title>可折叠展开的导航条
4
        </title>
5
    <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.1.min.js"></script>
6
</head>
7
    <body>
8
        <div class="box">
9
            <ul class="menu">
10
                <li class="level1">
11
                    <a href="#none">衬衫
12
                    </a>
13
                    <ul class="level2">
14
                        <li>
15
                            <a href="#none">短袖衬衫
CSS代码
复制 格式化 注释 注释 颜色 清空
放大 
xxxxxxxxxx
79
 
1
body {
2
    margin:0;
3
    padding:0 0 12px 0;
4
    font-size:12px;
5
    line-height:22px;
6
    font-family:"\5b8b\4f53","Arial Narrow";
7
    background:#fff;
8
}
9
form,ul,li,p,h1,h2,h3,h4,h5,h6 {
10
    margin:0;
11
    padding:0;
12
}
13
input,select {
14
    font-size:12px;
15
    line-height:16px;
JS代码
复制 格式化 注释 注释 清空
放大 
xxxxxxxxxx
10
 
1
$(document).ready(function() {
2
    $(".level1 > a").click(function() {
3
        $(this).addClass("current") //给当前元素添加"current"样式
4
        .next().show() //下一个元素显示
5
        .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式
6
        .next().hide();
7
        //它们的下一个元素隐藏
8
        return false;
9
    });
10
});
运行代码

简介

名称
可折叠展开的导航条
分类
菜单导航
描述
基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整的JS、css和jquery部分。
收藏