我正在修复一个由我以外的人修建的网站。我需要在移动视图中修复菜单滚动。到目前为止,我真正知道的是,如果您调整浏览器的大小,那么您突然可以滚动,但如果您使用的是移动设备,那么事实并非如此。该网站名为clasado.com如果您通过缩小浏览器视图端口更改为移动视图,然后打开菜单,您将看到在调整浏览器大小之前无法滚动。此菜单的javascript如下:
/**
* Navigation.js
*/
(function() {
var Console = window.Console || (function() {
return {
name: function() { return "Console" },
defaultConfig: function() { return this; },
config: function() { return this; },
to: function() { return this; },
in: function(m) { console.log(m); return this; },
out: function() { return this; },
log: function(m) { console.log(m); return this; },
reset: function() { return this; }
}
})();
var search = {
open: "[data-open]",
toggler: ">a>[data-toggle]",
group: "li > ul[data-collapsible]",
collapsible: "[data-collapsible]",
sidebarLeft: ".is-data .sidebar-left",
sidebar: ".sidebar"
}
/**
* The data-open attribute denotes that the menu block should open the sidebar
*/
$(search.open).on("click", function(evt) {
var sidebar = $(search.sidebar);
var toggler = UUID.generateFor(this);
var Log = toggler.data("log");
if(window.handyHint) {
handyHint.hide();
}
var isVertical = (function(sidebar, Log) {
return function() {
Log.in("checkIfSidebarIsVertical");
var isVertical = sidebar.find(".visible.vertical").css("display") !== "none";
return Log.out(isVertical);
}
})(sidebar, Log);
var sidebarControl = (function(sidebar, Log, isVertical) {
return {
/*
* Check to see if the sidebar is currently open
*/
isOpen: function() {
return sidebar.data("open") === true && sidebar.hasClass("open");
},
isClosed: function() {
return sidebar.data("open") !== true && !sidebar.hasClass("open");
},
/*
* Opens the passed sidebar
*/
open: function() {
Log.in("sidebarControlOpen");
if(!!sidebar.data("open") === true) {
// Sidebar is already open
return Log.out(true);
}
if(isVertical()) {
sidebar.find("> .menu").slideDown(100);
}
sidebar.toggleClass("open");
$("<div></div>", { class: "nav-cover" }).appendTo("body").on( "click", this.close )
sidebar.data("open", true);
//docCookies.setItem("navbarOpen", true, null, "/", document.location.hostname, false);
return Log.out(true);
},
close: function() {
Log.in("sidebarControlClose");
if(!!sidebar.data("open") === false) {
// Sidebar is already closed
return Log.out(true);
}
if(isVertical()) {
sidebar.find("> .menu").slideUp();
}
var closed_left = sidebar.data("closed_left");
Log.log("left : " + closed_left);
sidebar.toggleClass("open");
$(".nav-cover").remove();
sidebar.data("open", false);
//docCookies.setItem("navbarOpen", false, null, "/", document.location.hostname, false);
return Log.out(true);
}
}
})(sidebar, Log, isVertical);
/* Only do anything if the sidebar exists */
if(sidebar.isNotEmpty()) {
Log.in("sidebarExists");
if(sidebar.data("open")) {
Log.in("isOpen");
/*
* If the sidebar is currently open, then it is important to
* decide if the sidebar should just toggle to a different
* menu or be closed.
*/
if(!!toggler.data("open")) {
Log.in("hasStrip");
/*
* Prevent the default action if the menu block is meant to
* open the sidbar
*/
Log.log("Prevent default action");
// evt.preventDefault();
/*
* The toggler has a strip associated with it. Find the strip
* and use it to make a decision whether to open it or
* to close it and the sidebar (if it was already open).
*/
var area = toggler.data("open");
var menu_strip = $(".menu-strip." + area);
if(menu_strip.isNotEmpty()) {
Log.in("foundStrip");
var strip_was_open = !!menu_strip.hasClass("open");
var toggle = menu_strip.find(search.toggler);
if(toggle.isNotEmpty()) {
Log.in("foundToggle");
toggle.click();
Log.out();
}
if(strip_was_open) {
Log.in("stripWasOpen");
/*
* If the strip was open at the start of this check,
* then the sidebar needs to be closed.
*/
sidebarControl.close();
Log.out();
} else {
Log.log("stripWasClosed");
}
Log.out();
} else {
Log.in("couldNotFindStrip");
sidebarControl.close();
Log.out();
}
Log.out();
} else {
sidebarControl.close();
}
Log.out();
} else {
Log.in("isClosed");
/*
* If the sidebar is closed, it needs to be opened. Then,
* if the data-open tag notes a submenu to open, that menu
* should be opened.
*/
// Store the current left offset so it can be returned to when closed
var current_left = sidebar.find(search.sidebarLeft).css("left");
if(!!sidebar.data("closed_left") === false) {
sidebar.data("closed_left", "-375px");
}
sidebarControl.open();
if(!!toggler.data("open")) {
Log.in("hasStrip");
/*
* Prevent the default action if the menu block is meant to
* open the sidbar
*/
Log.log("Prevent default action");
evt.preventDefault();
/*
* If the menu block contains any information
* as to the menu to open, then it needs to be
* opened.
*/
// Fetch the menu strip to be opened that's stored
// on the toggler's data
var area = toggler.data("open");
var menu_strip = $(".menu-strip."+area);
if(menu_strip.isNotEmpty()) {
Log.in("foundStrip");
/*
* If the menu strip exists, then toggle it open
* by clicking on its toggle button.
*/
var toggle = menu_strip.find(search.toggler);
if(toggle.isNotEmpty()) {
Log.in("foundToggle");
// As there is a toggle, click it.
toggle.click();
Log.out();
} else {
Log.in("noToggleFound");
Log.out();
}
Log.out();
}
Log.out();
}
Log.out();
}
Log.out();
}
Log.out();
});
/**
* Ready function to set up collapsible navigation objects
*/
function ready() {
$(".default-open").removeClass('default-open');
$(search.collapsible).each(function() {
/*
* Set up the collapsing of each of the tagged elements
*/
var toggle = UUID.generateFor(this);
var Log = toggle.data("log");
var parent = toggle.parent();
var toggler = parent.find(search.toggler);
toggler.on("click", function(evt) {
Log.in("click");
/*
* If there is a drop down, then there needs to be a stop on any
* attempt to send to a new page!
*/
Log.log("prevent default action");
evt.preventDefault();
if(toggle.data("collapsible") == "") {
Log.in("justCollapse");
var Toggle = {
getToggle: function(el) {
var Log = Console.to("Toggle").in("getToggle(" + UUID.get(el) +")");
var group_parent = el.parent();
var toggle = group_parent.find(search.toggler);
if(toggle.isNotEmpty()) {
Log.log("foundToggle").out();
return toggle;
} else {
Log.log("noToggleFound").out();
return false;
}
},
open: function(el) {
var Log = Console.to("Toggle").in("open(" + UUID.get(el) +")");
if(!!el.data('open') == false) {
Log.in("canOpen");
el.slideDown(null, function() { myScroll.refresh(); });
el.parent().addClass("open");
el.data("open", true);
Log.out();
}
Log.out();
},
close: function(el) {
var Log = Console.to("Toggle").in("close(" + UUID.get(el) +")");
if(!!el.data('open') == true) {
Log.in("canClose");
el.slideUp();
el.parent().removeClass("open");
el.data("open", false);
Log.out();
}
Log.out();
},
toggle: function(el) {
var Log = Console.to("Toggle").in("toggle(" + UUID.get(el) +")");
if(!!el.data('open') == false) {
Toggle.open(el);
} else {
Toggle.close(el);
}
Log.out();
}
}
if(!!toggle.data("open")) {
Log.log("alreadyOpen");
Toggle.close(toggle);
Log.reset();
return;
}
Log.log("gettingGroup");
var group = toggle.parents("ul").first().find(search.group);
group.each(function(index) {
Log.in("processGroupIndex" + index);
var collapsible = $(this);
var last = (index == group.length - 1);
Toggle.close(collapsible);
if(last) {
Log.in("isLast");
Toggle.open(toggle);
Log.out();
}
Log.out();
});
Log.out();
} else {
Log.in("collapseInto");
var menu_holder_collapsible = toggle.data("collapsible");
var menu_holder_class = menu_holder_collapsible.split(":")[0];
var index = menu_holder_collapsible.split(":")[1];
var menu_holder = $(".menu-holder." + menu_holder_class);
if(menu_holder.isNotEmpty()) {
Log.in("foundMenuHolder");
if(menu_holder.data("open")) {
Log.in("menuIsOpen");
var toggle_field = menu_holder.find(search.collapsible);
if(menu_holder.data("index") == index) {
Log.in("indexMatch");
toggle_field.first().slideUp(function() {
Log.in("emptyMenuHolder");
menu_holder.empty();
Log.out();
});
menu_holder.data("open", false);
Log.out();
} else {
Log.in("differentIndex");
var cloned_toggle = toggle.clone();
cloned_toggle.hide();
if(index > menu_holder.data("index")) {
Log.in("indexGreaterThan");
if(cloned_toggle.children().isNotEmpty()) {
menu_holder.append(cloned_toggle);
}
Log.out();
} else {
Log.in("indexLessThan");
if(cloned_toggle.children().isNotEmpty()) {
menu_holder.prepend(cloned_toggle);
}
Log.out();
}
toggle_field.addClass("remove");
toggle_field.toggle(function() {
Log.in("removeToggleField");
menu_holder.find(".remove").remove();
Log.out();
});
cloned_toggle.toggle("slide");
menu_holder.data("index", index);
Log.out();
}
} else {
Log.in("menuIsClosed");
var cloned_toggle = toggle.clone();
if(cloned_toggle.children().isNotEmpty()) {
cloned_toggle.hide();
menu_holder.html(cloned_toggle);
cloned_toggle.slideDown();
menu_holder.data("open", true);
menu_holder.data("index", index);
}
Log.out();
}
Log.out();
} else {
Log.log("cannotFindMenuHolder");
}
Log.out();
}
Log.reset();
});
Log.reset();
});
}
$(window).load(ready);
})();
遗憾的是,CSS遍布整个地方,这将是一个难以巩固的过程。如果您可以检查网站并通过检查元素来了解样式,看看是否可以找到javascript或css修复,我们将不胜感激。
谢谢。
答案 0 :(得分:0)
您的.sidebar有位置:已修复。这为我修好了。只需在移动设备上移除这种风格,你也可能想要降低它的高度。