一款js点击显示和隐藏的例子(pc,移动端通用)


html部分:

<
div id="box"> <div id="box_title">标题</div> <div id="box_content">11111111<br/>2222222<br/>333333</div> </div>
css部分:

<style> #box
{position:fixed;bottom:0;z-index:10000;width:100%;} #box_title {background: #ff2a2a;} #box_content {display: none;} </style>
js部分:
<script>
    window.onload = function(){
        document.querySelector("#box_title").addEventListener("click",function(){
            var o = document.querySelector("#box_content")
            if(o.className == '') {
                o.style.display = 'block';
                o.className = 'active';
            }else{
                o.style.display = 'none';
                o.className = '';
            }
        },false);
    }

</script>

 

posted @ 2016-09-01 12:27  杜Amy  阅读(2406)  评论(1编辑  收藏  举报