Bootstrap SB 管理员自定义答案

【问题标题】：Bootstrap SB Admin customizationBootstrap SB 管理员自定义
【发布时间】：2020-10-07 23:31:43
【问题描述】：

我是一名新的 Web 开发人员，目前正在从事一些自动化项目。我想在我的网站前端使用 sb admin 主题并带有一些自定义功能。

我要使用的主题链接：https://startbootstrap.com/themes/sb-admin-2/

当您的桌面侧边栏未折叠时，当您的移动侧边栏折叠时。我想做的是在移动设备上我不希望侧边栏被折叠。我希望它像在桌面上一样全宽，但仍然可以切换。

我还根据需要对 jquery 代码进行了一些更改。但是，当我刷新页面或将其加载到移动设备上时，侧边栏会出现并再次返回其切换版本，这看起来像是一个错误。我想要的是在第一次打开或刷新时折叠侧边栏但没有这个错误。

    (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

Sidebar Bug

能否请您帮我设计移动设备上的全宽侧边栏并修复错误。谢谢。

【问题讨论】：

标签： jquery bootstrap-4

【解决方案1】：

使用 Chrome 开发工具和远程 android 调试来单步调试 javascript。它将帮助您确定导致菜单在页面加载时关闭的原因。

你的问题在于你的 screenClass()

 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");
  }  
}

【讨论】：