一款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>

 

转载于:https://www.cnblogs.com/amy-1205/p/5829352.html