简单原生js实现开关门效果

最新推荐文章于 2022-09-18 08:27:37 发布

没有名字随便喊

最新推荐文章于 2022-09-18 08:27:37 发布

阅读量2k

点赞数 2

分类专栏： JavaScript 文章标签： web javascript 原生

本文链接：https://blog.csdn.net/wyp_comeon/article/details/76563233

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

主体html内容部分：

<body>
    <div id="d1">树形列表</div>
    <div id="d2">&lt;&lt;</div>
    <div id="d3">内容的主体</div>
</body>

css部分：

    <style>
        div{float:left; height: 100px; line-height: 100px; }
        #d1,#d3{ background-color: #ccff00; }
        #d2{ cursor: pointer; background-color: #ffcc00; }
        #d1{
            width:64px;
            overflow:hidden;
            transition:all .5s linear;
        }
    </style>

js部分：

<script>
    var d2=document.getElementById("d2");
    d2.onclick=function(){
        //当前元素的上一个兄弟元素d1
        var d1=this.previousElementSibling;
        //判断当前为<<时，d1为隐藏
        if(this.innerHTML=="&lt;&lt;"){
            d1.style.display="none";
            this.innerHTML="&gt;&gt;";
        }else{
            d1.style.display="block";
  //d1.style.width="64px";直接修改宽度也可以显示隐藏
            this.innerHTML="&lt;&lt;";
        }
    }
</script>

没有名字随便喊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单原生js实现开关门效果

主体html内容部分：<body> <div id="d1">树形列表</div> <div id="d2">&lt;&lt;</div> <div id="d3">内容的主体</div></body>css部分： <style&gt...
复制链接

扫一扫

专栏目录