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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM