JQuery实现类QQ面板动画功能

最新推荐文章于 2025-09-05 09:05:41 发布

原创最新推荐文章于 2025-09-05 09:05:41 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用jQuery操作DOM元素的示例，通过选择不同的头部元素显示相应的身体元素，并隐藏其他身体元素，实现了简单的折叠效果。

代码如下：

<!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>