js 原生 实现 toggle()

css

<style>
        .show{
            opacity: 0;
        visibility: hidden;
        transition: all 2s linear;
            background: red;
        }
        .hide{
            visibility: visible;
        transition: all 2s linear;
            background: blue;

        } 
        #box{

            border: 1px solid #222;
            width: 500px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background: red;
        }
    </style>

<div id="show">显示/隐藏</div>
    <div id="box">
        hello world!
    </div>

    var show =document.getElementById('show');
        var box =document.getElementById('box');
        show.addEventListener('click',function(){
                if(hasClass(box, 'show')){
                        removeClass(box,'show');
                        addClass(box,'hide');
                }else{
                    removeClass(box,'hide');
                    addClass(box,'show');
                }
        })
        box.onclick=function(){
            alert('s');
        }

        function addClass(el, className) {
            if (hasClass(el, className)) {
                return
            }
            let newClass = el.className.split(' ')
            newClass.push(className)
            el.className = newClass.join(' ')
        }

        function hasClass(el, className) {
            // \s匹配任何空白字符，包括空格、制表符、换页符等等
            let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
            return reg.test(el.className)
        }
        function removeClass(el, className){
            if (!hasClass(el, className)) {
                return
            }
            let newClass = el.className.split(' ')
            newClass.forEach(function(val, index, newClass){
                if(val === className){
                    newClass.splice(index,1);
                }
            }) 
            el.className = newClass.join(' ')
        }