云服务器293元/年
阅读模式:

Jquery树状导航效果

查看:2294  回复: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

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
网站性能优化-页面静态缓存   阅读:2452php文件下载防盗链   阅读:4353centos 7.2 添加php7 的 php-fpm 开机启动   阅读:11523linux命令中执行php脚本   阅读:2500一步步带你,如何网站架构   阅读:1803分享:淘宝技术这十年   阅读:2081phpexcel 超简单从数据库一键导出数据到excel教程   阅读:3277centos 7 修改系统屏幕分辨率   阅读:20367php生成二维码   阅读:2483Nginx 配置文件详解   阅读:2020php打印九九加法表   阅读:3093php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:2188php连接redis   阅读:2604封装php redis缓存操作类   阅读:3050解决 nginx 413 request entity too large   阅读:1902centos 7 安装 php-7.1.3   阅读:9808知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:2524centos 7 忘记root密码   阅读:1775linux教程,鸟哥私房菜(pdf全集)   阅读:2154网站局部小图片优化-base64编码图片   阅读:3739浅谈javascript的函数节流   阅读:1904phpexcel 超简单从数据库一键导出数据到excel教程   阅读:3277面试都会问你为什么你从上一家公司离职的真实意思   阅读:5030centos 7 添加 redis 3.2.9 开机启动脚本   阅读:4247“米粉节”背后的故事——小米网抢购系统开发实践   阅读:1839shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:3728session与cookie的区别   阅读:1956纯干货,程序员面试的超实用技巧   阅读:1757一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:16779linux php7安装yaf扩展   阅读:2481javascript获取两个日期间的所有日期   阅读:569centos 7 安装 samba 服务   阅读:2345linux命令中执行php脚本   阅读:2500给 centos 7 安装桌面环境   阅读:10020企业让你去面试,可能不是真的招人   阅读:2600centos 7 设置 nginx-1.11.10 开机启动   阅读:3500shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:3728爱编程,也爱健康   阅读:1521session与cookie的区别   阅读:1956给 centos 7 安装桌面环境   阅读:10020php打印九九加法表   阅读:3093linux教程,鸟哥私房菜(pdf全集)   阅读:2154mysql 为什么添加索引可以提高访问速度   阅读:2562linux php7安装yaf扩展   阅读:2481mongodb设置shell开机启动脚本   阅读:3292php 生成图片,给图片加水印   阅读:2968用php从1加到100的值   阅读:3989centos 7 安装 mysql-5.7   阅读:2768javascript点击复制内容   阅读:2454centos 7 设置 nginx-1.11.10 开机启动   阅读:3500