首页 > 代码库 > 第一次来博客园先用jquery写一个简单菜单收缩效果

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://www.mamicode.com/jquery-1.7.2.min.js"></script>
    <style>
        div, ul, li{margin:0px;padding:0px;list-style-type:none;}
        #menu{width:120px;margin:0px auto;text-align:center;}
        .menuItem{font-size:16px;font-weight:900;border:1px solid red;cursor:pointer;}
        .subMenu{display:none;opacity:0;}
        .subItem{font-size:14px;font-weight:normal;}
    </style>
    <script>
        $(function () {
            $(".subItem:even").css("background-Color", "#ddd");
            $(".menuItem").hover(function () {
                $(this).children().stop().animate({ opacity: 1.0,height:‘show‘ });
            }, function () {
                $(this).children().stop().animate({ opacity: 0, height: ‘hide‘ });
            });
        });

    </script>
</head>
<body>
    <div style="margin:40px auto;">
        <ul id="menu">
            <li class="menuItem">
                greens
                <ul class="subMenu">
                    <li class="subItem">Chinesecabbage</li>
                    <li class="subItem">potato</li>
                    <li class="subItem">tomato</li>
                </ul>

            </li>

        </ul>

    </div>
</body>
</html>