js控制显示与隐藏

二级菜单的显示与隐藏:

   <div id="OPenBtn"> 隐藏 </div>

    <ul class="list">
        <li>二级菜单1</li>
        <li>二级菜单2</li>
        <li>二级菜单3</li>
    </ul>

   ul>li{
            list-style: none;  
        }

        var OPenBtn = document.getElementById('OPenBtn');
        var list = document.getElementsByClassName('list')[0]; //此时list是一个数组
        
        var isOpen = false;
        list.style.display = 'none';
        
        OPenBtn.addEventListener('click',function(){
            isOpen = !isOpen;
            if(isOpen){
                list.style.display = 'block';
                OPenBtn.innerHTML = '显示'
            }else{
                list.style.display = 'none';
                OPenBtn.innerHTML = '隐藏'
            }
       
        })