您的位置：首页 > Web前端 > JQuery

JQuery实现类QQ面板动画功能

2012-12-06 20:35 232 查看


代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#qq li:even").addClass("header");
            $("#qq li:odd").addClass("body");
            $("#qq li:even").click(function () {
                $(this).next("li.body").show("normal").siblings("li.body").hide("normal");
            });
            $("#qq li:first").click();
        });
    </script>
    <style type="text/css">
        #qq {
            list-style-type:none;
            border-style:solid;
            border-width:1px;
            border-color:gray;
            padding-left:0px;
        }
        .header {
            background-color:#d9cfcf;
            color:red;
            font-weight:500;
            cursor:pointer;
            border-style:solid;
            border-width:1px;
            border-color:gray;

        }
        .body {
            background-color:#f7f7ac;
        }
    </style>
</head>
<body>
    <ul id="qq" style="width:100px">
        <li>好友</li>
        <li>阿里巴巴<br />小树<br />大海</li>
        <li>同学</li>
        <li>老五<br />老三<br />张强</li>
        <li>同事</li>
        <li>李老师<br />王老师<br />老岳<br />姚老师</li>
    </ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航