hide jquery sidebar Elemente vor dem Laden der Seite

Question

Ich habe eine jquery Sidebar, die alle Elemente zeigt, während die Seite geladen wird, und dann minimiert, wenn die Seite fertig geladen ist.

Ich möchte die Elemente im ausgeblendeten Untermenü ausblenden, sodass sie nur angezeigt werden, wenn auf das Menü geklickt wird, um die Untermenüs anzuzeigen. Hier

ist, was die Funktion wie folgt aussieht:

(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); 

}) 

Dies ist, wie es aussieht, wenn die Seite geladen wird:

Dies ist, wie es aussieht, wenn die Seite endet:

Wie können die Unterelemente ausgeblendet werden, während die Seite geladen wird?

Answer 1

Generisches Beispiel.
Fühlen Sie sich frei, die .loaded Klasse überall in Ihrem Skript hinzuzufügen, nachdem Sie .collapse auf den Inhalt Ihrer .sidebar initialisiert haben. Sie könnten auch die Klasse etwas umbenennen anderes:

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

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

Vielleicht möchten Sie dies ändern, so gilt es für einige bestimmte Kinder .sidebar oder anstelle display zu verwenden, einige andere CSS-Eigenschaften verwenden, die sein könnte animiert, wie opacity, transform, max-height ...

Aber das Prinzip ist das gleiche. Fügen Sie Stile hinzu, um zu verhindern, dass .sidebar schlecht aussieht, bevor JavaScript ausgeführt wird, und entfernen Sie diese Regeln, wenn Ihre Seite geladen wurde.

---

Eine andere mögliche Lösung ist ng-cloak Klasse .sidebar oder einem seiner Eltern hinzuzufügen. Dies wird es ausblenden, bis AngularJS geladen hat. Es verwendet das gleiche Prinzip, das oben beschrieben wurde, aber invertiert (bei angularen Lasten entfernt es die Klasse und die Elemente, die es bis zu diesem Punkt haben, werden angezeigt).