Я новый веб-разработчик и сейчас работаю над проектом автоматизации. Я хочу использовать тему 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
Ошибка боковой панели
Может Пожалуйста, помогите мне спроектировать боковую панель полной ширины на мобильном телефоне и исправить ошибку. Спасибо.