zoukankan      html  css  js  c++  java
  • 【HTML+JavaScript(jQuery)】实现侧边栏下拉菜单

    需求:实现侧边栏下拉菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜单实例</title>
        <style>
            ul {
                padding:0;
                margin:0;
                list-style: none;
            }
            .nav {
                 120px;
            }
            .nav h2 {
                margin:0;
                font-size: 16px;
                font-weight: normal;
                padding: 0px 20px;
                height: 40px;
                line-height: 40px;
                border:1px solid #999;
                border-bottom:none;
                background: #369;
                cursor: pointer;
            }
            .nav ul {
                border:1px solid #999;
                display: none;
            }
            .nav li a{
                color:#333;
                font-size: 14px;
                text-align: center;
                text-decoration: none;
                display: block;
                padding: 0px 20px;
                height: 30px;
                line-height: 30px;
                border-bottom:1px solid #999;
            }
            .nav li:last-child a {
                border-bottom:none;
            }
        </style>
    </head>
    <body>
        <h1>后台管理</h1>
        <hr>
    
        <div class="nav">
            <h2>用户管理</h2>
            <ul>
                <li><a href="#">用户列表</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">用户删除</a></li>
                <li><a href="#">用户修改</a></li>
            </ul>
    
            <h2>订单管理</h2>
            <ul>
                <li><a href="#">订单列表</a></li>
                <li><a href="#">订单添加</a></li>
                <li><a href="#">订单删除</a></li>
                <li><a href="#">订单修改</a></li>
            </ul>
    
    
            <h2>商品管理</h2>
            <ul>
                <li><a href="#">用户列表</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">用户删除</a></li>
                <li><a href="#">用户修改</a></li>
            </ul>
    
            <h2>评论管理</h2>
            <ul>
                <li><a href="#">用户列表</a></li>
                <li><a href="#">用户添加</a></li>
                <li><a href="#">用户删除</a></li>
                <li><a href="#">用户修改</a></li>
            </ul>
        </div>
    
        <script src="../jquery-3.3.1.js"></script>
        <script>
            $(function(){
                $('.nav h2').on('click', function(){
                    //$(this).next('ul').toggle();
                    $(this).next('ul').slideToggle();
                })
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    记一次Redis+Getshell经验分享
    冰蝎动态二进制加密WebShell基于流量侧检测方案
    ubuntu16下安装mongodb 3.6
    centos安装sass环境必看
    CLR 调试体系结构
    CLR 调试概述
    CLR Exception---E0434352
    关于System.MissingMethodException异常
    关于异常System.ArgumentException
    从.NET/CLR返回的hresult:0x8013XXXX的解释
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9483312.html
Copyright © 2011-2022 走看看