如何使用display =" none"显示隐藏的项目它们存储在一个数组中而不会丢失它的旧属性

时间:2016-10-10 04:18:35

标签: javascript html css

的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";
        }


    }

HMTL

     <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') ;
  4. 在上面的三个选项中,只有第一个(display='none')适用于我。但问题是在使用display="none"隐藏后显示代码时,某些样式会被更改(填充,边距等等)。 )。我如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我不确定如果我找到你,那里有一堆没有现场演示的代码,但是如果你说第二次显示时你会看到一些道具,请尝试添加以下内容到您的代码,以确保:

if(display ! == none) {//you can hide now}

这将使代码仅在项目可见时运行