javascript — боковая панель jQuery — проблема с ее скрытием по умолчанию

Боковая панель jQuery — проблема с ее скрытием по умолчанию

Я новичок в веб-разработке, и я изо всех сил пытаюсь выяснить, как скрыть боковую панель по умолчанию при загрузке страницы. У меня есть приложение ASP.NET MVC, и я использую эту боковую панель здесь .

Страница с боковой панелью настроена следующим образом:

 @using (Html.BeginForm("Index", "Ideas", FormMethod.Post)) { {amp}lt;div id="my-sidebar-context" class="widget-sidebar-context sidebar-hide"{amp}gt; {amp}lt;div class="page-body"{amp}gt; {amp}lt;nav class="widget-sidebar"{amp}gt; ...code for items on the sidebar {amp}lt;/nav{amp}gt; {amp}lt;div class="page-main"{amp}gt; {amp}lt;div id="page-content-wrapper"{amp}gt; {amp}lt;div class="container-fluid"{amp}gt; {amp}lt;div style="display:inline-block;"{amp}gt; {amp}lt;a href="#" class="navbar-toggler widget-sidebar-toggler"{amp}gt; {amp}lt;i class="fa fa-bars fa-log{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; ...code for what is populated on the page {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; } @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") {amp}lt;script{amp}gt; $(function () { $("#my-sidebar-context").simpleSidebar(); }); {amp}lt;/script{amp}gt; 

Кнопка для переключения боковой панели работает нормально, но когда страница загружается, она по умолчанию открывает боковую панель, хотя я устанавливаю для класса включение «sidebar-hide».

Javascript для боковой панели, которую я использую:

 //---------------------------------------- // side bar toggling //---------------------------------------- var jContext = $('#my-sidebar-context'); var jSidebar = $('.widget-sidebar', jContext); // the sidebar ;(function ( $, window, document, undefined ) { var pluginName = 'simpleSidebar'; function Plugin ( element, options ) { this.element = element; this._name = pluginName; this._defaults = $.fn.simpleSidebar.defaults; this.options = $.extend( {}, this._defaults, options ); this.init(); } $.extend(Plugin.prototype, { init: function () { var jContext = $(this.element); $('.widget-sidebar-toggler', jContext).on('click', function () { if (jContext.hasClass("sidebar-show")) { jContext.removeClass('sidebar-show'); jContext.addClass('sidebar-hide'); } else if (jContext.hasClass("sidebar-hide")) { jContext.removeClass('sidebar-hide'); jContext.addClass('sidebar-show'); } else { // default behaviour, if small screen, we show the sidebar, if large screen, we hide the sidebar var isSmallScreen = true; var marginLeft = parseInt(jSidebar.css('margin-left')); if (0 === marginLeft) { isSmallScreen = false; } if (true === isSmallScreen) { jContext.addClass('sidebar-show'); } else { jContext.addClass('sidebar-hide'); } } return false; }); }, }); $.fn.simpleSidebar = function ( options ) { this.each(function() { if ( !$.data( this, "plugin_"   pluginName ) ) { $.data( this, "plugin_"   pluginName, new Plugin( this, options ) ); } }); return this; }; $.fn.simpleSidebar.defaults = { // property: 'value', // onComplete: null }; })( jQuery, window, document ); 

CSS для боковой панели, которую я использую:

 /*------------------------------------ - META VARIABLES ------------------------------------*/ /*------------------------------------ - SIDEBAR VARIABLES ------------------------------------*/ .widget-sidebar-context { position: relative; /** make the footer go at the bottom of the screen */ display: flex; flex-direction: column; min-height: 100vh; /*------------------------------------ - CLICKED STATES ------------------------------------*/ } .widget-sidebar-context .page-header { position: relative; z-index: 1025; } .widget-sidebar-context .page-body { background: #e3e3e3; flex-grow: 1; display: flex; } .widget-sidebar-context .page-body .widget-sidebar { position: fixed; width: 240px; height: calc(100vh - 50px); /** Note: we use margin-left instead of transform: translateX because it seems that the latter extends the width of the divs, which makes scrollbars appear in certain cases, while on the other hand with margin-left the content remains constrained inside its container div boundaries. */ margin-left: -240px; z-index: 1024; display: flex; display: -ms-flexbox; flex-direction: column; padding: 0; color: #fff; background: #262D33; transition: margin 0.24s, opacity 0.24s; overflow-y: auto; opacity: 0; /*------------------------------------ - NATURAL RESPONSIVENESS for the sidebar ------------------------------------*/ } .widget-sidebar-context .page-body .widget-sidebar i { margin-right: 7px; } .widget-sidebar-context .page-body .widget-sidebar a[data-toggle="collapse"] { position: relative; } .widget-sidebar-context .page-body .widget-sidebar .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .widget-sidebar-context .page-body .widget-sidebar [aria-expanded="false"]::after { transition: transform 0.24s; transform: rotate(-90deg); } .widget-sidebar-context .page-body .widget-sidebar [aria-expanded="true"]::after { transition: transform 0.24s; transform: rotate(0deg); } .widget-sidebar-context .page-body .widget-sidebar a[aria-expanded="true"], .widget-sidebar-context .page-body .widget-sidebar a.active { color: #fff; background: #315472; } .widget-sidebar-context .page-body .widget-sidebar ul li a { padding: 10px; font-size: 1em; display: block; color: #e0e0e0; text-decoration: none; border-left: 2px solid transparent; } .widget-sidebar-context .page-body .widget-sidebar ul li a:hover { background: #414d58; border-left: 2px solid #608ab3; } .widget-sidebar-context .page-body .widget-sidebar ul ul a { font-size: 0.9em !important; padding-left: 30px !important; } .widget-sidebar-context .page-body .widget-sidebar ul ul ul a { padding-left: 50px !important; } .widget-sidebar-context .page-body .widget-sidebar .active { background-color: #072433; } @media (min-width: 992px) { .widget-sidebar-context .page-body .widget-sidebar { margin-left: 0px; opacity: 1; } } .widget-sidebar-context .page-main { margin-left: 0; flex: 1; /** * Very important!! * Without it, the reponsive tables (.table-responsive) class won't work properly inside cards. * Spent 1 hour to find it... */ min-width: 0; } @media (min-width: 992px) { .widget-sidebar-context .page-main, .widget-sidebar-context .page-footer { margin-left: 240px; } } .widget-sidebar-context.sidebar-show .widget-sidebar { margin-left: 0px; opacity: 1; } .widget-sidebar-context.sidebar-show .page-main, .widget-sidebar-context.sidebar-show .page-footer { margin-left: 240px; } @media (max-width: 576px) { .widget-sidebar-context.sidebar-show .page-main::before { position: fixed; top: 0; left: 0; z-index: 1010; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.7); animation: opacity .25s; } } .widget-sidebar-context.sidebar-hide .widget-sidebar { margin-left: -240px; opacity: 0; } .widget-sidebar-context.sidebar-hide .page-main, .widget-sidebar-context.sidebar-hide .page-footer { margin-left: 0; } /*# sourceMappingURL=simplesidebar.css.map */ 

Какие-либо предложения? При запуске и проверке элемента, при переключении боковой панели, он устанавливает класс «sidebar-hide». Поэтому, когда я изменил код, чтобы он соответствовал этому, я ожидал, что он будет скрыт по умолчанию. Однако это не так. Что мне не хватает?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector