在页面加载之前隐藏jQuery边栏项目

我有一个jquery边栏，显示页面加载时的所有元素，然后在页面加载完成时进行折叠。在页面加载之前隐藏jQuery边栏项目

我想隐藏折叠子菜单中的项目，因此只有在单击菜单以显示子菜单时才会显示它们。

下面是函数的样子：

(jQuery); 
},{}],"/Code/html/themes/themekit/lib/sidebar/js/_dropdown.js":[function(require,module,exports){ 
(function ($) { 
    "use strict"; 

    /** 
    * jQuery plugin wrapper for compatibility with Angular UI.Utils: jQuery Passthrough 
    */ 
    $.fn.tkSidebarDropdown = function() { 

     if (! this.length) return; 

     var sidebar = this; 

     sidebar.find('.collapse') 
      .off('shown.bs.collapse') 
      .off('show.bs.collapse') 
      .off('hidden.bs.collapse'); 

     var nice = sidebar.find('[data-scrollable]'); 

     if (nice.length) { 
      nice = nice.getNiceScroll()[ 0 ]; 
      nice.scrollstart(function() { 
       if (! sidebar.is('[data-type="dropdown"]')) return; 
       sidebar.addClass('scrolling'); 
       sidebar.find('#dropdown-temp > ul > li').empty(); 
       sidebar.find('#dropdown-temp').hide(); 
       sidebar.find('.open').removeClass('open'); 
      }); 

      nice.scrollend(function() { 
       if (! sidebar.is('[data-type="dropdown"]')) return; 
       $.data(this, 'lastScrollTop', nice.getScrollTop()); 
       sidebar.removeClass('scrolling'); 
      }); 
     } 

     sidebar.find('.hasSubmenu').addClass('dropdown').removeClass('open') 
      .find('> ul').addClass('dropdown-menu').removeClass('collapse in').removeAttr('style') 
      .end() 
      .find('> a').removeClass('collapsed') 
      .removeAttr('data-toggle'); 

     sidebar.find('.sidebar-menu > li.dropdown > a').on('mouseenter', function() { 

      var c = sidebar.find('#dropdown-temp'); 

      sidebar.find('.open').removeClass('open'); 
      c.hide(); 

      if (! $(this).parent('.dropdown').is('.open') && ! sidebar.is('.scrolling')) { 
       var p = $(this).parent('.dropdown'), 
        t = p.find('> .dropdown-menu').clone().removeClass('submenu-hide'); 

       if (! c.length) { 
        c = $('<div/>').attr('id', 'dropdown-temp').appendTo(sidebar); 
        c.html('<ul><li></li></ul>'); 
       } 

       c.show(); 
       c.find('.dropdown-menu').remove(); 
       c = c.find('> ul > li').css({overflow: 'visible'}).addClass('dropdown open'); 

       p.addClass('open'); 
       t.appendTo(c).css({ 
        top: p.offset().top - c.offset().top, 
        left: '100%' 
       }).show(); 

       if (sidebar.is('.right')) { 
        t.css({ 
         left: 'auto', 
         right: '100%' 
        }); 
       } 
      } 
     }); 

     sidebar.find('.sidebar-menu > li > a').on('mouseenter', function() { 

      if (! $(this).parent().is('.dropdown')) { 
       var sidebar = $(this).closest('.sidebar'); 
       sidebar.find('.open').removeClass('open'); 
       sidebar.find('#dropdown-temp').hide(); 
      } 

     }); 

     sidebar.find('.sidebar-menu > li > a').on('click', function (e) { 
      if ($(this).parent().is('.dropdown')) { 
       e.preventDefault(); 
       e.stopPropagation(); 
      } 
     }); 

     sidebar.on('mouseleave', function() { 
      $(this).find('#dropdown-temp').hide(); 
      $(this).find('.open').removeClass('open'); 
     }); 

     sidebar.find('.dropdown').on('mouseover', function() { 
      $(this).addClass('open').children('ul').removeClass('submenu-hide').addClass('submenu-show'); 
     }).on('mouseout', function() { 
      $(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide'); 
     }); 

     $('body').on('mouseout', '#dropdown-temp .dropdown', function() { 
      $('.sidebar-menu .open', $(this).closest('.sidebar')).removeClass('.open'); 
     }); 

    }; 

    var transform_dd = function() { 

     $('.sidebar[data-type="dropdown"]').each(function() { 
      $(this).tkSidebarDropdown(); 
     }); 

    }; 

    var transform_collapse = function() { 

     $('.sidebar[data-type="collapse"]').each(function() { 
      $(this).tkSidebarCollapse(); 
     }); 

    }; 

    transform_dd(); 

    $(window).bind('enterBreakpoint480', function() { 
     if (! $('.sidebar[data-type="dropdown"]').length) return; 
     $('.sidebar[data-type="dropdown"]').attr('data-type', 'collapse').attr('data-transformed', true); 
     transform_collapse(); 
    }); 

    function make_dd() { 
     if (! $('.sidebar[data-type="collapse"][data-transformed]').length) return; 
     $('.sidebar[data-type="collapse"][data-transformed]').attr('data-type', 'dropdown').attr('data-transformed', true); 
     transform_dd(); 
    } 

    $(window).bind('enterBreakpoint768', make_dd); 

    $(window).bind('enterBreakpoint1024', make_dd); 

})

这是个什么样子，当页面加载像：

这是什么样子的页面完成时：

如何在页面加载时隐藏子项目？

来源

2017-06-26 Atma

通用示例。
在您的.sidebar的内容初始化.collapse后，随时在您的脚本的任何位置添加.loaded课程。你也可以在类重命名为别的东西：

.sidebar { 
    display: none; 
} 
.sidebar.loaded { 
    display: block; 
}

$(window).load(function(){ 
    $('.sidebar').addClass('loaded') 
})

你可能想改变这种做法，它适用于.sidebar某些特定的儿童或者，而不是使用display，使用一些其他的CSS属性可能是动画，如opacity,transform,max-height ...

但是原理是一样的。添加样式以防止在运行javascript之前.sidebar看起来很糟糕，并且在加载页面时删除这些规则。

另一种可能的解决方案是ng-cloak类添加到.sidebar或任何其父母。这将隐藏它，直到AngularJS加载。它使用与上面概述的相同的确切原则，但是反转（当角加载删除类以及到该点为止的元素被显示时）。

来源

2017-06-26 21:09:20

在页面加载之前隐藏jQuery边栏项目

回答

相关问题