qq列表，每组之间互不干扰

最新推荐文章于 2024-07-22 04:20:18 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2024-07-22 04:20:18 发布

阅读量413

点赞数

分类专栏： JavaScript积跬步至千里文章标签： javascript

本文链接：https://blog.csdn.net/wstpa/article/details/44876963

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ列表</title>
    <style type="text/css">
        div {display:none;}
    </style>
</head>
<body>
    <ul id="ul1">
        <li>
            <h3>分组一</h3>
            <div>
                <ul>
                    <li>111111111</li>
                    <li>222222222</li>
                    <li>333333333</li>
                    <li>444444444</li>
                </ul>
            </div>
        </li>
        <li>
            <h3>分组一</h3>
            <div>
                <ul>
                    <li>111111111</li>
                    <li>222222222</li>
                    <li>333333333</li>
                    <li>444444444</li>
                </ul>
            </div>
        </li>
        <li>
            <h3>分组一</h3>
            <div>
                <ul>
                    <li>111111111</li>
                    <li>222222222</li>
                    <li>333333333</li>
                    <li>444444444</li>
                </ul>
            </div>
        </li>
        <li>
            <h3>分组一</h3>
            <div>
                <ul>
                    <li>111111111</li>
                    <li>222222222</li>
                    <li>333333333</li>
                    <li>444444444</li>
                </ul>
            </div>
        </li>
    </ul>
    <script type="text/javascript">

    var oUl=document.getElementById('ul1');
    var aH3=oUl.getElementsByTagName('h3');
    var aDiv=oUl.getElementsByTagName('div');

    for (var i = 0; i < aH3.length; i++) {
        aH3[i].index=i;
        aH3[i].bBtn=true;  //为了不相互影响，因此给每一个h3都设定一个true开关。
        aH3[i].onclick=function(){
            if (this.bBtn) {
                aDiv[this.index].style.display="block";
                this.bBtn=false;
            } else{
                aDiv[this.index].style.display="none";
                this.bBtn=true;
            };

        }

    };

    </script>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qq列表，每组之间互不干扰

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ列表</title> <style type="text/css"> div {display:none;} </style></head><body> <ul id="ul1">
复制链接

扫一扫

专栏目录