Bootstrap Настройка SB Admin - PullRequest
0 голосов
/ 03 мая 2020

Я новый веб-разработчик и сейчас работаю над проектом автоматизации. Я хочу использовать тему sb admin для моего сайта с некоторыми пользовательскими функциями.

Ссылка на тему, которую я хочу использовать: https://startbootstrap.com/themes/sb-admin-2/

Когда вы на рабочем столе боковая панель не сворачивается, и когда вы на мобильной боковой панели становятся свернутыми. То, что я хочу сделать, это то, что на мобильном телефоне я не хочу, чтобы боковая панель была свернута. Я хочу, чтобы он был полным, как на рабочем столе, но все еще переключаемым.

Свернутая боковая панель

Полная ширина боковой панели

Также Я внес некоторые изменения в jquery коды в соответствии с моими потребностями. Но когда я обновляю sh страницу или загружаю ее на мобильный телефон, боковая панель просто возвращается и снова возвращается к переключенной версии, это выглядит как ошибка. Что я хочу, так это свернуть боковую панель при ее открытии или переосмыслить sh в первый раз, но без этой ошибки.

    (function($) {
  "use strict"; // Start of use strict

  // Toggle the side navigation
  $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
    $("body").toggleClass("sidebar-toggled");
    $(".sidebar").toggleClass("toggled");
    if ($(".sidebar").hasClass("toggled")) {
      $('.sidebar .collapse').collapse('hide');
    };
  });

  $(".container-fluid").on('click', function(e) {
    if ($(".sidebar").hasClass("accordion")) {
      $("body").addClass("sidebar-toggled");
      $(".sidebar").addClass("toggled"); 
    }
  });   

  $( document ).ready(function() {
    function screenClass() {
      if($(window).innerWidth() > 768) {
        $(".sidebar").hover(function(e) {
          $("body").removeClass("sidebar-toggled");
          $(".sidebar").removeClass("toggled");
        });
        $("#content").hover(function(e) {
          $("body").addClass("sidebar-toggled");
          $(".sidebar").addClass("toggled");
        });
      } else {
        $("body").addClass("sidebar-toggled");
        $(".sidebar").addClass("toggled");
      }  
    } 

    screenClass();

    $(window).bind('resize',function(){
      screenClass();
    });
  });   

  // Close Sub Menus When Hover Over Content
  $("#content").hover(function(e) {
    $("#test-button").addClass("collapsed"); // This test button has to be added into htm nav links as an id
    $("#collapseTwo").removeClass("show");
  });

  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
  $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
    if ($(window).width() > 768) {
      var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
      e.preventDefault();
    }
  });

  // Scroll to top button appear
  $(document).on('scroll', function() {
    var scrollDistance = $(this).scrollTop();
    if (scrollDistance > 100) {
      $('.scroll-to-top').fadeIn();
    } else {
      $('.scroll-to-top').fadeOut();
    }
  });

  // Smooth scrolling using jQuery easing
  $(document).on('click', 'a.scroll-to-top', function(e) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: ($($anchor.attr('href')).offset().top)
    }, 1000, 'easeInOutExpo');
    e.preventDefault();
  });

})(jQuery); // End of use strict

Ошибка боковой панели

Может Пожалуйста, помогите мне спроектировать боковую панель полной ширины на мобильном телефоне и исправить ошибку. Спасибо.

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