0
Ich erstelle eine Website mit _s Theme für WordPress und ich versuche, ihre native Navigationsdatei zu verwenden + einige Änderungen, die ich gemacht habe, um Untermenüs zu verwenden.Reparieren meiner responsiven Navigation auf Touch-Geräten
Hier ist der Link zu der Website: Ich kann nicht Doppel-Tap http://www.listsofscholarships.com/
Auf meinem Computer auf Touch-Geräten arbeiten, aber das Problem ist, ich kann es sehen arbeiten nur in Chrome oder Firefox, wie ich es will um jedes Untermenü zu schließen.
Ich habe ein paar Dinge ausprobiert, aber ich kann nicht scheinen, um zu umgehen, jede Hilfe wäre willkommen, danke!
Hier ist das JavaScript für sie:
/**
* File navigation.js.
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
(function() {
var container, button, menu, links, subMenus, i, len;
container = document.getElementById('site-navigation');
if (! container) {
return;
}
button = container.getElementsByTagName('button')[0];
if ('undefined' === typeof button) {
return;
}
menu = container.getElementsByTagName('ul')[0];
// Hide menu toggle button if menu is empty and return early.
if ('undefined' === typeof menu) {
button.style.display = 'none';
return;
}
menu.setAttribute('aria-expanded', 'false');
if (-1 === menu.className.indexOf('nav-menu')) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if (-1 !== container.className.indexOf('toggled')) {
container.className = container.className.replace(' toggled', '');
button.setAttribute('aria-expanded', 'false');
menu.setAttribute('aria-expanded', 'false');
} else {
container.className += ' toggled';
button.setAttribute('aria-expanded', 'true');
menu.setAttribute('aria-expanded', 'true');
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName('a');
subMenus = menu.getElementsByTagName('ul');
// Set menu items with submenus to aria-haspopup="true".
for (i = 0, len = subMenus.length; i < len; i++) {
subMenus[i].parentNode.setAttribute('aria-haspopup', 'true');
}
// Each time a menu link is focused or blurred, toggle focus.
for (i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('mouseup', toggleFocused, true);
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocused(event) {
var self = this;
if(document.getElementById('site-navigation').classList.contains('toggled')){
// Move up through the ancestors of the current link until we hit .nav-menu.
while (-1 === self.className.indexOf('nav-menu')) {
// On li elements toggle the class .focus.
if ('li' === self.tagName.toLowerCase()) {
if (-1 !== self.className.indexOf('focus')) {
self.className = self.className.replace(' focus', '');
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
}
// Each time a menu link is focused or blurred, toggle focus.
for (i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('touchstart', toggleFocus, true);
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus(event) {
var self = this;
return false;
/*event.preventDefault();*/
event.stopPropagation();
if(document.getElementById('site-navigation').classList.contains('toggled')){
// Move up through the ancestors of the current link until we hit .nav-menu.
while (-1 === self.className.indexOf('nav-menu')) {
// On li elements toggle the class .focus.
if ('li' === self.tagName.toLowerCase()) {
if (-1 !== self.className.indexOf('focus')) {
self.className = self.className.replace(' focus', '');
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
}
/**
* Toggles `focus` class to allow submenu access on tablets.
*/
(function(container) {
var touchStartFn, i,
parentLink = container.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
if ('ontouchstart' in window) {
touchStartFn = function(e) {
var menuItem = this.parentNode, i;
if (! menuItem.classList.contains('focus')) {
e.preventDefault();
for (i = 0; i < menuItem.parentNode.children.length; ++i) {
if (menuItem === menuItem.parentNode.children[i]) {
continue;
}
menuItem.parentNode.children[i].classList.remove('focus');
}
menuItem.classList.add('focus');
} else {
menuItem.classList.remove('focus');
}
};
for (i = 0; i < parentLink.length; ++i) {
parentLink[i].addEventListener('touchstart', touchStartFn, false);
}
}
}(container));
})();
zu entfernen, die nicht in Ordnung ist (nur einen Link). Sehen Sie diese http://stackoverflow.com/help/mcve - das Problem ist, sobald Ihr Link behoben ist, hat dies keinen Wert für zukünftige Besucher. Bei SO geht es darum, Mehrwert für zukünftige Besucher zu schaffen. Sie müssen Ihren Code hier posten, sonst wird er geschlossen. –
Ich denke, du hast Recht :) Ich habe den JS-Code hier hinzugefügt. –