X
活动推荐

阿里云高性能云主机2折293元/年

企业级性能云服务器限时2折起
新用户5折爆款服务器会场
查看详情
阅读模式:

Jquery树状导航效果

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

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
mysql 为什么添加索引可以提高访问速度   阅读:5270javascript获取两个日期间的所有日期   阅读:5476mongodb设置shell开机启动脚本   阅读:8314移动端自适应rem原理   阅读:8698web项目高并发量网站解决方案   阅读:3923mysql5.7主从同步中binlog同步模式详解   阅读:4866session与cookie的区别   阅读:3601移动端js触摸touch详解(附带案例源码)   阅读:14618mysql数据一键导出到csv文件   阅读:4833php swoole搭建简单的聊天室   阅读:2466centos7.3安装mongodb3.6   阅读:6230linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:14189centos7中颁发CA证书并开启web https   阅读:5399企业让你去面试,可能不是真的招人   阅读:5193mongodb设置shell开机启动脚本   阅读:8314centos 7 修改系统屏幕分辨率   阅读:38692爱编程,也爱健康   阅读:3573php设置cookie为HttpOnly防止XSS攻击   阅读:10976面试的时候和你谈理想,是理想or入坑?   阅读:8596linux教程,鸟哥私房菜(pdf全集)   阅读:7799最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:9585纯干货,程序员面试的超实用技巧   阅读:3642php打印三角形   阅读:7044centos7开启交换内存   阅读:9431程序员找工作三要素(必看)   阅读:4985给网站添加一键qq登录的功能   阅读:6365centos 7搭建zabbix3.4   阅读:5362crontab+shell脚本实现定时备份mysql数据库   阅读:6586mysql5.7主从同步中binlog同步模式详解   阅读:4866php设置cookie为HttpOnly防止XSS攻击   阅读:10976Mysql在大型网站的应用架构演变   阅读:3934nginx安装mysql和json模块   阅读:3574分享:淘宝技术这十年   阅读:4141centos 7 安装 samba 服务   阅读:5667mongodb设置shell开机启动脚本   阅读:8314centos 7搭建zabbix3.4   阅读:5362phpexcel 超简单从数据库一键导出数据到excel教程   阅读:6439mysql数据一键导出到csv文件   阅读:4833企业让你去面试,可能不是真的招人   阅读:5193nginx安装mysql和json模块   阅读:3574Mysql在大型网站的应用架构演变   阅读:3934封装php redis缓存操作类   阅读:7797shell脚本统计当前服务器并发连接数   阅读:6094shell发送邮件脚本   阅读:5994用php从1加到100的值   阅读:7391一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:117961浅谈javascript的函数节流   阅读:4011php翻转字符串   阅读:2685centos7开启交换内存   阅读:9431mysql数据库性能的基本优化   阅读:3997