javascript实现模仿qq列表分组

<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>

这里a是一个按钮，我们把a的跳转功能阻止了。a就变成了普通的元素。

a标签的href属性用于指定点击超链接之后将要跳转到的地址，如果href属性的值指定为"javascript:void(0)"
或"javascript:;"那么点击a标签之后不再跳转(这里可以把a当做一个普通元素)。

function openDiv(thisobj){}

thisobj当前被点a元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
body{
    font-family: "微软雅黑";
}
table {
    border:#0099FF 1px solid;
    width:100px;
    border-collapse:collapse;
    margin:15px 10px;
    width:10%;
}
    
table td{
    border:#0066FF 1px solid;
    background-color:#6f5f3e;
    text-align:center;
    padding: 5px 0px;
}

table td div {
    background-color:#FFFF99;
    text-align:left;
    line-height: 24px;
    padding-left: 14px;
}
    
table td a:link, table td a:visited {
    color:#00ffFF;
    text-decoration:none;
}
    
table td a:hover {
    color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div { display:none; }

</style>
<!--引入jquery的js库-->
<script type="text/javascript">

    //通过js实现访QQ列表好友分组
    //1.点击分组名称可以展开当前分组
    //2.点击分组名称先关闭其他展开的分组，再展开当前分组
    //3.如果分组是展开的，点击则关闭分组，如果分组是关闭的，点击则展开分组

    function openDiv(thisobj){
        /*点击分组:
        如果分组是展开的，点击之后则关闭
        如果分组是关闭的，点击之后则展开，在展开之前先关闭所有分组，在展开当前分组*/
        //thisobj-->当前被点击的a元素
        //获取当前被点击的a元素后面相邻的div元素
        var div=thisobj.nextElementSibling;
        //console.log(div.style.display);
        //var div=thisobj.parentNode.getElementsByTagName("div")[0];
        if(div.style.display=="block"){
            div.style.display="none";
        }else{
            //在展开当前分组之前，先关闭所有分组
            var arrDivs=document.getElementsByTagName("div");
            for(var i=0;i<arrDivs.length;i++)
            {
                arrDivs[i].style.display="none";
            }
            //将a元素后面相邻的div元素设置为显示
            div.style.display="block";

        }

    }


</script>
</head>
<body>
<table>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
            <div> 
                <!-- oDiv.style.display-->
                <!-- oDiv.style.display = "none"-->
                <!-- oDiv.style.display = "block"-->
                秦始皇<br />
                刘邦<br />
                李世民<br />
                康熙<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:;" onclick="openDiv(this)">三国好友</a>
            <div>
                刘备<br />
                关羽<br />
                张飞<br />
                赵云<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:;" onclick="openDiv(this)">美女好友</a>
            <div>
                西施<br />
                貂蝉<br />
                杨贵妃<br />
                王昭君<br />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:;" onclick="openDiv(this)">IT好友</a>
            <div>
                马云<br />
                李开复<br />
                俞敏洪<br />
                黎活明<br />
            </div>
        </td>
    </tr>
</table>
</body>
</html>

最后编辑于：2018.08.10 10:50:37