zoukankan      html  css  js  c++  java
  • 夺命雷公狗jquery---38--DWZ左侧折叠菜单实现升级版

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div{
                    width:125px;
                    border:1px solid #369;
                    line-height:25px;
                    padding-left:10px;
                }
    
                div.menu{
                    height:30px;
                    line-height:30px;
                    font-size:14px;
                    text-indent:10px;
                    font-weight:bold;
                    color:#fff;
                    background-color:#369;
                }
    
            </style>
            <script src="js/jq8.js"></script>
            <script>
                $(function(){
                    $('.menu + div').hide();
                    $('#a1 + div').show();
                    $('div.menu').bind('click',function(){
                        $('.menu + div').hide();
                        var id = this.id;
                        $('#'+id+' + div').toggle();
                    });
                });
            </script>
        </head>
        <body>
            <div id="a1" class="menu">管理员管理</div>
            <div>
                添加管理员<br />
                删除管理员<br />
                跟新管理员<br />
                查询管理员<br />
            </div>
    
    
            <div id="a2" class="menu">管理员管理</div>
            <div>
                添加管理员<br />
                删除管理员<br />
                跟新管理员<br />
                查询管理员<br />
            </div>
    
    
            <div id='a3' class="menu">管理员管理</div>
            <div>
                添加管理员<br />
                删除管理员<br />
                跟新管理员<br />
                查询管理员<br />
            </div>
    
    
            <div id='a4' class="menu">管理员管理</div>
            <div>
                添加管理员<br />
                删除管理员<br />
                跟新管理员<br />
                查询管理员<br />
            </div>
    
    
        </body>
    </html>
  • 相关阅读:
    Less与Sass
    JQuery基础
    JS中DOM以及BOM
    JS函数入门
    JS入门
    响应式布局和弹性布局,移动开发常用技巧
    CSS基础1
    H5入门
    error C2143: syntax error : missing ';' before 'type'
    Windows系统下nodejs安装及配置
  • 原文地址:https://www.cnblogs.com/leigood/p/4920145.html
Copyright © 2011-2022 走看看