javascript - 如何使用显示 ="none"显示隐藏的元素，这些元素存储在数组中而不丢失其旧属性

Question

JavaScript

 function hideSideMenu() {
            if(document.getElementById("arrow-left").className === "arrow-left fa fa-arrow-left") {
            var k = document.getElementsByClassName('menu-title');
            for (var i = 0;i < k.length ; i++) {
                /*k[i].style.display = 'none' ;*/
                     /*k[i].style.removeProperty('display') ;*/
            }
            var m =document.getElementsByClassName('spinner-ico');
            for (var j = 0;j < m.length; j++) {
                m[j].style.display = '' ;
            }
            document.getElementById('navbar').className="navbar-after-click";

            document.getElementById('top-container').className="top-container-after-click";
            document.getElementById('innerContnt').className="inner-content-after-click";
            document.getElementById('footer').className="footer-after-click";
            document.getElementById('logo').className="logo-after-click";
            document.getElementById("arrow-left").className="arrow-left-after-click fa fa-bars";
        }
         else{
            //echo("i'm working");
            var k = document.getElementsByClassName('menu-title');
            for (var i = 0;i < k.length ; i++) {
                k[i].style.display = 'block' ;
            }
              var m =document.getElementsByClassName('spinner-ico');
            for (var j = 0;j < m.length; j++) {
                m[j].style.display = 'block' ;
            }
            document.getElementById('innerContnt').className="inner-content"; 
            document.getElementById("arrow-left").className="arrow-left fa fa-arrow-left";
             document.getElementById('footer').className="footer";
             document.getElementById('top-container').className="top-container";
             document.getElementById('logo').className="logo";
        }


    }

HTML

     <ul id="leftMenu" class="clearfix">
                   <li class="topmenu ltopmenu-display-event"><a href="http://qmsadm.local/dashboard"><span class="ico fa fa-fw
 fa-dashboard                                                          
 "></span><span id="menu-title"
 class="menu-title">Dashboard</span></a></li><li class="topmenu
 ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
 fa fa-fw fa-globe                                                     
 "></span><span id="menu-title" class="menu-title">Admin</span><span
 class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a
 href="http://qmsadm.local/admin/users"><span class="ico fa fa-fw
 fa-users                                                              
 "></span>Users</a></li><li><a
 href="http://qmsadm.local/admin/roles"><span class="ico fa fa-fw
 fa-user-md                                                            
 "></span>Roles</a></li><li><a
 href="http://qmsadm.local/admin/menu"><span class="ico fa fa-fw
 fa-navicon                                                            
 "></span>Manage Menu</a></li><li><a
 href="http://qmsadm.local/admin/clients"><span class="ico fa fa-fw
 fa-pagelines                                                          
 "></span>Clients</a></li><li><a
 href="http://qmsadm.local/admin/templates"><span class="ico fa fa-fw
 fa-glass                                                              
 "></span>Templates</a></li><li><a
 href="http://qmsadm.local/admin/devreqs"><span class="ico fa fa-fw
 fa-cloud-upload                                                       
 "></span>Device Requests</a></li><li><a
 href="http://qmsadm.local/admin/devices"><span class="ico fa fa-fw
 fa-laptop                                                             
 "></span>Devices</a></li></ul></li><li class="topmenu
 ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
 fa fa-fw fa-puzzle-piece                                              
 "></span><span id="menu-title" class="menu-title">App</span><span
 class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a
 href="http://qmsadm.local/app/counters"><span class="ico fa fa-fw
 fa-ticket                                                             
 "></span>Counters</a></li><li><a
 href="http://qmsadm.local/app/displays"><span class="ico fa fa-fw
 fa-desktop                                                            
 "></span>Displays</a></li><li><a
 href="http://qmsadm.local/app/kiosks"><span class="ico fa fa-fw
 fa-hand-o-up                                                          
 "></span>Kiosks</a></li><li><a
 href="http://qmsadm.local/app/ads"><span class="ico fa fa-fw fa-film  
 "></span>Ads</a></li><li><a
 href="http://qmsadm.local/app/category"><span class="ico fa fa-fw
 fa-star                                                               
 "></span>Category</a></li><li><a
 href="http://qmsadm.local/app/subcategory"><span class="ico fa fa-fw
 fa-star-half                                                          
 "></span>Sub Category</a></li></ul></li><li class="topmenu
 ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
 fa fa-fw fa-pie-chart                                                 
 "></span><span id="menu-title" class="menu-title">Reports</span><span
 class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a
 href="http://qmsadm.local/reports/token/detail"><span class="ico fa
 fa-fw fa-th-large                                                     
 "></span>Token Detail</a></li><li><a
 href="http://qmsadm.local/reports/token/summary"><span class="ico fa
 fa-fw fa-envelope-o                                                   
 "></span>Token Summary</a></li><li><a
 href="http://qmsadm.local/reports/counter/detail"><span class="ico fa
 fa-fw fa-pencil-square-o                                              
 "></span>Counter Detail</a></li><li><a
 href="http://qmsadm.local/reports/counter/summary"><span class="ico fa
 fa-fw fa-briefcase                                                    
 "></span>Counter Summary</a></li><li><a
 href="http://qmsadm.local/reports/regusers"><span class="ico fa fa-fw
 fa-dedent                                                             
 "></span>Registered Users</a></li><li><a
 href="http://qmsadm.local/reports/admin/activities"><span class="ico
 fa fa-fw fa-clipboard                                                 
 "></span>Admin Activities</a></li></ul></li><li class="topmenu
 ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
 fa fa-fw fa-gears                                                     
 "></span><span id="menu-title" class="menu-title">Settings</span><span
 class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a
 href="http://qmsadm.local/settings/personal"><span class="ico fa fa-fw
 fa-columns                                                            
 "></span>Personal</a></li><li><a
 href="http://qmsadm.local/settings/language"><span class="ico fa fa-fw
 fa-bold                                                               
 "></span>Language</a></li><li><a
 href="http://qmsadm.local/settings/client"><span class="ico fa fa-fw
 fa-male                                                               
 "></span>Client</a></li></ul></li><li class="topmenu
 ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico
 fa fa-fw fa-anchor                                                    
 "></span><span id="menu-title" class="menu-title">Super</span><span
 class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a
 href="http://qmsadm.local/super/activities"><span class="ico fa fa-fw
 fa-pencil                                                             
 "></span>Activities</a></li></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li>

                 </ul>
               </li>
                       </ul>

在上面的代码中，我试图隐藏菜单项 onclick .我尝试了以下操作。

1. k[i].style.display = 'none';
2. k[i].style.display = "";
3. k[i].style.removeProperty('display') ;

在上面的三个选项中，只有第一个( display='none' )对我有用。但问题是在使用 display="none" 隐藏后显示代码时某些样式已更改(填充、边距等)。我该如何解决？

Answer 1

我不太确定如果我得到你，有一堆没有现场演示的代码，但如果你说你在第二次显示时得到了一些 Prop ，请尝试将以下内容添加到你的代码中以制作当然:

if(display !== none) {//你现在可以隐藏了

这将使代码仅在元素可见时运行