X
活动推荐

爆款高性能云主机2折293元/年

企业级性能云服务器限时2折起
查看详情 293元/年
阅读模式:

Jquery树状导航效果

查看:2961  回复:0  类型:  来源:php自学网  标签 jquery

    Jquery树状导航效果预览和下载,适合做分类的功能。

预览地址:http://zixuephp.net/uploads/file/20170627/1498562938456515.html

预览效果:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jquery树状导航效果</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .menulist-n{  display:block;  margin-left:40px;  border-left:2px solid #eee;  padding-left:0px;  }
        .menulist-n span {  color:#eee;  }
        .menulist-n .addline{  color:#eee;  }
        .menulist-n li {  color:#000;  }
        .menulist-n li .topnames { font-size:15px; color:#323d53; font-weight:bold;}
        .menulist-n span {  color:#000;  }
        .menulist-n .adds {  width:12px;  height:12px;  color:#000;  display:inline-block;  line-height:12px;  text-align:center;  border:1px solid #000;  font-size:12px;  margin-right:0px;  }
        .menulist-n li:hover{  color:#005580;  cursor: pointer;  }
        .menulist-n>li {  list-style: none;  min-height:25px;  line-height:25px;  text-align:left;  font-size:14px;  }
        .menulist-n-l{  display:block;  border-left:2px solid #eee;  margin-left:25px;  padding-left:0px;  }
        .menulist-n-l>li{  list-style: none;  min-height:25px;  line-height:25px;  text-align:left;  font-size:14px;  }
        .mvremove:hover{color:red;}
        .mvedit:hover{color:#03C4F7;}
        .mvedit,.mvremove{font-size:12px;}
    </style>
</head>
<body>

<table  style="width:100%; margin:0 auto;" >
    <tr>
        <td colspan="4">
            <ul class="menulist-n">

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">分类管理</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            文章分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            标签分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            友链分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            测试分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            管理分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">php自学网</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            PHP
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            MYSQL
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                           LINUX
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            NGINX
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            REDIS
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">文章排行</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            点击量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            阅读量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            点赞量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            浏览量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">网站排行</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

            </ul>
        </td>
    </tr>
</table>


<script type="text/javascript">

    $(document).ready(function() {

        //导航列表效果
        $('.menulist-n>li').each(function () {
            var adds = '';
            $(this).children('.topnames').click(function () {
                adds = $(this).siblings('.adds').text();

                $(this).siblings('.adds').text('-');
                $(this).siblings('.menulist-n-l').slideDown();

            });
            var addsdom = $(this).children('.adds');
            addsdom.click(function () {

                adds = addsdom.text();

                if (adds == '+') {
                    addsdom.text('-');
                    addsdom.parent().children('ul').slideDown();
                } else {
                    addsdom.parent().children('ul').slideUp();
                    addsdom.text('+');
                }
            });
        });

    });

</script>
</body>
</html>

点击显示隐藏的树状导航栏分类效果。

分享到:
0 0

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
php连接redis   阅读:4142mysql中文分词全文搜索索引讯搜的安装   阅读:4866mysql的四种索引类型   阅读:13491php压缩页面的html代码一行显示   阅读:5289分享:淘宝技术这十年   阅读:3489移动端js触摸touch详解(附带案例源码)   阅读:12124crontab+shell脚本实现定时备份mysql数据库   阅读:5216nginx安装mysql和json模块   阅读:1814session与cookie的区别   阅读:3023mysql5.7主从同步中binlog同步模式详解   阅读:2848Mysql在大型网站的应用架构演变   阅读:3354最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:10494javascript获取两个日期间的所有日期   阅读:3878shell发送邮件脚本   阅读:3455PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:8117用php从1加到100的值   阅读:6433php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:4201mongodb设置shell开机启动脚本   阅读:6522php 统计网页打开耗时和脚本运行内存   阅读:4948linux top命令详解   阅读:6283mysql 为什么添加索引可以提高访问速度   阅读:4441shell脚本批量删除几天前的文件   阅读:6483centos 7 安装 nginx-1.11.10   阅读:6276php打印九九加法表   阅读:6780网站局部小图片优化-base64编码图片   阅读:5924linux教程,鸟哥私房菜(pdf全集)   阅读:5958给 centos 7 安装桌面环境   阅读:14335mysql 为什么添加索引可以提高访问速度   阅读:4441mysql 为什么添加索引可以提高访问速度   阅读:4441session与cookie的区别   阅读:3023centos7开启交换内存   阅读:7790mysql 为什么添加索引可以提高访问速度   阅读:4441最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:24250centos7中颁发CA证书并开启web https   阅读:3336解决 nginx 413 request entity too large   阅读:3202分享:淘宝技术这十年   阅读:3489centos 7 忘记root密码   阅读:3448最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:24250php 读取和设置redis的键值   阅读:5664小米手机端商城rem适配原理   阅读:5412网站局部小图片优化-base64编码图片   阅读:5924mysql数据库性能的基本优化   阅读:3438session与cookie的区别   阅读:3023Nginx 配置文件详解   阅读:3395最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:10494十张GIF让你弄懂递归等概念   阅读:4304HTTP 1.1 协议详解   阅读:5903比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:3698面试的时候回去等通知,等电话的真实意思   阅读:16518mysql数据库性能的基本优化   阅读:3438