Js制作手风琴

最新推荐文章于 2024-08-03 17:05:14 发布

weixin_30335575

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fengyeyang/p/4986839.html

版权

关于JavaScript，我对其有简单的认识，并且关于制作手风琴的时候使用addEventListener可能会只绑定一个按钮的事件，因此使用下面代码的方法制作一个手风琴吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: block;
            width: 80%;
            margin: 0 auto;
        }

        .list-item {
            display: block;
            width: 300px;
            height: 50px;
            background: rgba(12, 12, 12, .3);
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid rgba(12, 12, 12, .5);
            cursor: pointer;
        }

        .list-item:hover {
            background: rgba(111, 111, 111, .8);
            color: white;
        }

        .list ul {
            display: none;
        }

        .list ul li {
            display: block;
            width: 300px;
            height: 30px;
            background: rgba(100, 100, 100, .3);
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid rgba(12, 12, 12, .3);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="list">
        <p class="list-item">文件</p>
        <ul>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
        </ul>
    </div>
    <div class="list">
        <p class="list-item">编辑</p>
        <ul>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
        </ul>
    </div>
</div>
<script>
    var listItem = document.getElementsByClassName("list-item");

   

    for(var i=0;i<listItem.length;i++){
        listItem[i].addEventListener("click", function(){
            if(this.nextElementSibling.style.display=="block"){
                this.nextElementSibling.style.display = "none";
            }else{
                this.nextElementSibling.style.display="block";
            }
        },false);
       // console.log(listItem[i].nextElementSibling.childElementCount);
    }


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

转载于:https://www.cnblogs.com/fengyeyang/p/4986839.html

weixin_30335575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js制作手风琴

关于JavaScript，我对其有简单的认识，并且关于制作手风琴的时候使用addEventListener可能会只绑定一个按钮的事件，因此使用下面代码的方法制作一个手风琴吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫