zoukankan      html  css  js  c++  java
  • jquery 后台管理菜单展开与关闭实例(2)

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS</title>
        <style>
            ul,li{margin:0; padding:0; list-style:none}
            h3{margin:0}
            a{text-decoration:none;color:#333}
            .navlist{width:240px; margin-left:60px;}
            .navlist h3{-webkit-user-select:none;cursor:pointer;height:40px;line-height:40px;border:1px solid #999;background-color:#abcdef;padding:0 20px;}
            .navlist li{height:38px;line-height:38px;padding:0 20px;border:1px solid #999;border-top:none;}
            .navlist ul{display:none}
        </style>
        <script src="./jquery-1.8.3.min.js"></script>
        <script>
            $(function(){
                $(".navlist ul:first").show();
                //绑定单击事件
                $(".navlist h3").click(function(){
                    $(this).next('ul').slideDown().siblings('ul').slideUp();
                })
            })
        </script>
    </head>
    <body>
    
        <h1>jquery 后台管理</h1>
        <hr>
        <div class="navlist">
            <h3>用户管理</h3>
            <ul>
                <li><a href="#">用户查询</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">分配角色</a></li>
            </ul>
            
            <h3>商品管理</h3>
            <ul>
                <li><a href="#">用户查询</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">分配角色</a></li>
                <li><a href="#">分配角色</a></li>
            </ul>
            
            
            <h3>订单管理</h3>
            <ul>
                <li><a href="#">用户查询</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">分配角色</a></li>
                <li><a href="#">分配角色</a></li>
            </ul>
            
            
            <h3>评价管理</h3>
            <ul>
                <li><a href="#">用户查询</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">分配角色</a></li>
                <li><a href="#">分配角色</a></li>
            </ul>
            
            
            <h3>留言管理</h3>
            <ul>
                <li><a href="#">用户查询</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">分配角色</a></li>
                <li><a href="#">分配角色</a></li>
            </ul>
        </div>
    </body>
    </html>
  • 相关阅读:
    sublime3使用
    内存缓存 ehcache
    一些服务端写代码的规范,很重要
    对于算法的一点思考
    使用单元测试引发的一些思考
    在多线程中使用spring的bean
    一个线上缓存异常
    java 中的同步机制
    微服务中的集成测试
    服务升级中的zookeeper
  • 原文地址:https://www.cnblogs.com/shanyansheng/p/5060846.html
Copyright © 2011-2022 走看看