Как изначально скрыть боковую навигационную панель - PullRequest
0 голосов
/ 26 сентября 2019

В настоящее время я использую шаблон начальной загрузки Dashgum, который я получил от Gridgum, для задачи, для которой мне поручено показывать боковую панель навигации при входе пользователя (даже когда они закрывают указанный сайт) и скрывать боковую панель навигациикак будто его не существует, когда пользователь выходит из системы.

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

Я все еще новичок в начальной загрузке, поэтому я к этому еще не привык.Спросил это на SO в качестве крайней меры.

HTML-код для боковой панели

<aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">

                  <p class="centered"><a href="profile.html"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p>
                  <h5 class="centered">Marcel Newman</h5>

                  <li class="mt">
                      <a href="index.html">
                          <i class="fa fa-dashboard"></i>
                          <span>Dashboard</span>
                      </a>
                  </li>
</ul>
          </div>
      </aside>

JS-код для свертывания боковой панели

//    sidebar toggle

    $(function() {
        function responsiveView() {
            var wSize = $(window).width();
            if (wSize <= 768) {
                $('#container').addClass('sidebar-close');
                $('#sidebar > ul').hide();
            }

            if (wSize > 768) {
                $('#container').removeClass('sidebar-close');
                $('#sidebar > ul').show();
            }
        }
        $(window).on('load', responsiveView);
        $(window).on('resize', responsiveView);
    });

    $('.fa-bars').click(function () {
        if ($('#sidebar > ul').is(":visible") === true) {
            $('#main-content').css({
                'margin-left': '0px'
            });
            $('#sidebar').css({
                'margin-left': '-210px'
            });
            $('#sidebar > ul').hide();
            $("#container").addClass("sidebar-closed");
        } else {
            $('#main-content').css({
                'margin-left': '210px'
            });
            $('#sidebar > ul').show();
            $('#sidebar').css({
                'margin-left': '0'
            });
            $("#container").removeClass("sidebar-closed");
        }
    });

Я попытался изменить css и вызвалкоманда jquery

$("#container").addClass("sidebar-closed");

на html-странице, заключенная в тег javascript после первой загрузки css.Панель навигации по-прежнему отображается по умолчанию.

РЕДАКТИРОВАТЬ 1 - Исправлена ​​предпосылка проблемы для предоставления дополнительной информации.

  • Я хотел бы поблагодарить всех заотвечая на мой вопрос, и я попробовал все решения, которые вы представили.Вывод, который я получил, обычно представлял собой таблицу и боковую панель навигации, перекрывающуюся (когда пользователь вошел в систему), и при выходе из системы, хотя боковая панель навигации скрыта, основное содержимое не смещается влево.

РЕДАКТИРОВАТЬ 2 - Поскольку таблица и боковая панель навигации перекрываются, я решил, что по умолчанию нужно скрыть панель навигации, но до сих пор у меня не получилось.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2019

Я думаю, что у вас почти это было!

Если вы посмотрите на функцию переключения, они добавляют и удаляют класс sidebar-close в зависимости от размера окна.

Вы сделали $("#container").addClass("sidebar-closed");

Попробуйте заменить класс sidebar-closed на класс sidebar-close, например:

$("#container").addClass("sidebar-close");


0 голосов
/ 26 сентября 2019

Добавьте этот код в js, если у вас нет document.ready:

$(document).ready(function(){
         $('#main-content').css({
                    'margin-left': '0px'
                });
                $('#sidebar').css({
                    'margin-left': '-210px'
                });
                $('#sidebar > ul').hide();
    }

Если у вас уже есть document.ready, просто скопируйте его в функцию document.ready:

$('#main-content').css({
            'margin-left': '0px'
        });
        $('#sidebar').css({
            'margin-left': '-210px'
        });
        $('#sidebar > ul').hide();

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...