jquery 下拉菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul,li,ol,h3{
            padding:0;
            margin:0;
            list-style: none;
            cursor: pointer;
        }
 
        ul{
            width:200px;
            border:1px solid #ccc;
        }
 
        ul li{
            width:100%;
            margin-bottom: 2px;
        }
        ul li ol{
            display: none;
        }
        ul li h3{
            height:30px;
            background: #333;
            color:#fff;
            line-height: 30px;
 
        }
        ul li h3,ol{
            text-align: center;
            width:100%;
        }
        ul li ol li{
            height:25px;
            background: #ccc;
            color:#333;
            margin-bottom: 2px;
            line-height: 25px;
        }
    </style>
</head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('h3').click(function(){
            // 匹配正则执行的动画  让动画停止并且隐藏
            $('ul li ol:animated').stop().hide();
            // 让指定的 ol  执行动画效果
            $(this).next().slideToggle('slow');
 
            $('ol li').mouseover(function(){
                $(this).css('background','orange');
            }).mouseout(function(){
                $(this).css('background','');
            })
        })
    })
 
</script>
<body>
    <h1>树状菜单</h1>
    <ul>
        <li>
            <h3>用户管理</h3>
            <ol>
                <li>用户列表</li>
                <li>用户添加</li>
                <li>用户删除</li>
                <li>用户修改</li>
            </ol>
        </li>
        <li>
            <h3>商品管理</h3>
            <ol>
                <li>商品列表</li>
                <li>商品添加</li>
                <li>商品删除</li>
                <li>商品修改</li>
            </ol>
        </li>
        <li>
            <h3>新闻管理</h3>
            <ol>
                <li>新闻列表</li>
                <li>新闻添加</li>
                <li>新闻删除</li>
                <li>新闻修改</li>
            </ol>
        </li>
        <li>
            <h3>公告管理</h3>
            <ol>
                <li>公告列表</li>
                <li>公告添加</li>
                <li>公告删除</li>
                <li>公告修改</li>
            </ol>
        </li>
        <li>
            <h3>友情管理</h3>
            <ol>
                <li>友情列表</li>
                <li>友情添加</li>
                <li>友情删除</li>
                <li>友情修改</li>
            </ol>
        </li>
 
    </ul>
</body>
</html>
本博客所有文章如无特别注明均为原创。作者:长颈鹿复制或转载请以超链接形式注明转自 SZY
原文地址《jquery 下拉菜单

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)