jquery QQ效果

来源:luqidong 发布时间:2013-09-10 21:07:55 点击数:
 

实现起来很简单~~但是有个遗憾就是当鼠标mouseover名字的时候能出现彩条,这个我jq的选择器不怎么怎么才能选择到。把<br>换成<a>就好选择了,此demo同样适合做菜单效果。

-----------------------------------------------------------------------Code--------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#qq li:odd").addClass("body");

            $("#qq li:even").addClass("head").click(function () {

                $(this).next("li.body").show("slow").siblings("li.body").hide("slow");

            })

            $("li:br").mouseover(function () {

                $(this).css("background""Gray");

            })

        })

    </script>

    <style type="text/css">

        ul

        {

            list-style-typenone;

        }

        .head

        {

            background-colorRed;

            cursorpointer;

        }

        .body

        {

            border-colorBlue;

            border-stylesolid;

            border-width1px;

        }

    </style>

</head>

<body>

    <div>

        <ul id="qq">

            <li>我的好友</li>

            <li>780a<br />

                oa系统<br />

                免费oa<br />

                oa</li>

            <li>免费的oa系统</li>

            <li>免费oa<br />

                免费oa<br />

                免费oa</li>

            <li>免费oa</li>

            <li>免费oa<br />

                免费oa<br />

                免费oa</li>

            <li>免费oa</li>

            <li>免费oa<br />

                免费oa<br />

                免费oa</li>

            <li>免费oa</li>

            <li>免费oa<br />

                免费oa<br />

                免费oa</li>

        </ul>

    </div>

</body>

</html>