Вкратце, я создал веб-сайт, и теперь у меня возникла проблема с навигационным меню. В моем навигационном меню есть подменю, которое раскрывается, чтобы открыть некоторые другие меню. Это работает. в режиме рабочего стола все в порядке, раскрывающиеся меню работают отлично, но как только я перехожу в режим просмотра для мобильных устройств, раскрывающееся меню перестает работать
(function() {
"use strict";
/**
* Apply .scrolled class to the body as the page is scrolled down
*/
function toggleScrolled() {
const selectBody = document.querySelector('body');
const selectHeader = document.querySelector('#header');
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
window.scrollY > 100 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
}
document.addEventListener('scroll', toggleScrolled);
window.addEventListener('load', toggleScrolled);
/**
* Mobile nav toggle
*/
const mobileNavToggleBtn = document.querySelector('.mobile-nav-toggle');
function mobileNavToogle() {
document.querySelector('body').classList.toggle('mobile-nav-active');
mobileNavToggleBtn.classList.toggle('bi-list');
mobileNavToggleBtn.classList.toggle('bi-x');
}
mobileNavToggleBtn.addEventListener('click', mobileNavToogle);
/**
* Hide mobile nav on same-page/hash links
*/
document.querySelectorAll('#navmenu a').forEach(navmenu => {
navmenu.addEventListener('click', () => {
if (document.querySelector('.mobile-nav-active')) {
mobileNavToogle();
}
});
});
/**
* Toggle mobile nav dropdowns
*/
document.querySelectorAll('.navmenu .toggle-dropdown').forEach(navmenu => {
navmenu.addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.classList.toggle('active');
this.parentNode.nextElementSibling.classList.toggle('dropdown-active');
e.stopImmediatePropagation();
});
});
/**
* Preloader
*/
const preloader = document.querySelector('#preloader');
if (preloader) {
window.addEventListener('load', () => {
preloader.remove();
});
}
/**
* Scroll top button
*/
let scrollTop = document.querySelector('.scroll-top');
function toggleScrollTop() {
if (scrollTop) {
window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
}
}
scrollTop.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('load', toggleScrollTop);
document.addEventListener('scroll', toggleScrollTop);
/**
* Animation on scroll function and init
*/
function aosInit() {
AOS.init({
duration: 600,
easing: 'ease-in-out',
once: true,
mirror: false
});
}
window.addEventListener('load', aosInit);
/**
* Initiate glightbox
*/
const glightbox = GLightbox({
selector: '.glightbox'
});
/**
* Frequently Asked Questions Toggle
*/
document.querySelectorAll('.faq-item h3, .faq-item .faq-toggle').forEach((faqItem) => {
faqItem.addEventListener('click', () => {
faqItem.parentNode.classList.toggle('faq-active');
});
});
/**
* Init swiper sliders
*/
function initSwiper() {
document.querySelectorAll(".init-swiper").forEach(function(swiperElement) {
let config = JSON.parse(
swiperElement.querySelector(".swiper-config").innerHTML.trim()
);
if (swiperElement.classList.contains("swiper-tab")) {
initSwiperWithCustomPagination(swiperElement, config);
} else {
new Swiper(swiperElement, config);
}
});
}
window.addEventListener("load", initSwiper);
/**
* Correct scrolling position upon page load for URLs containing hash links.
*/
window.addEventListener('load', function(e) {
if (window.location.hash) {
if (document.querySelector(window.location.hash)) {
setTimeout(() => {
let section = document.querySelector(window.location.hash);
let scrollMarginTop = getComputedStyle(section).scrollMarginTop;
window.scrollTo({
top: section.offsetTop - parseInt(scrollMarginTop),
behavior: 'smooth'
});
}, 100);
}
}
});
/**
* Navmenu Scrollspy
*/
let navmenulinks = document.querySelectorAll('.navmenu a');
function openModal(title, description) {
document.getElementById('modalTitle').innerText = title;
document.getElementById('modalDescription').innerText = description;
document.getElementById('designModal').style.display = 'block';
}
function closeModal() {
document.getElementById('designModal').style.display = 'none';
}
// Close the modal when clicking outside of it
window.onclick = function(event) {
if (event.target == document.getElementById('designModal')) {
closeModal();
}
}
function navmenuScrollspy() {
navmenulinks.forEach(navmenulink => {
if (!navmenulink.hash) return;
let section = document.querySelector(navmenulink.hash);
if (!section) return;
let position = window.scrollY + 200;
if (position >= section.offsetTop && position link.classList.remove('active'));
navmenulink.classList.add('active');
} else {
navmenulink.classList.remove('active');
}
})
}
window.addEventListener('load', navmenuScrollspy);
document.addEventListener('scroll', navmenuScrollspy);
})();
[Итак, в моем CSS-коде есть этот раздел. В этом разделе у меня есть две строки: «Видимость» и «Непрозрачность».
Исходное:
Видимость: скрыто
Непрозрачность: 0
Новый код:
Видимость: видимый
Непрозрачность: 1
Изменение только этих двух строк фактически приводит к появлению окна, но выглядит странно](https://i.sstatic.net/nCMKW8PN.png)
Вкратце, я создал веб-сайт, и теперь у меня возникла проблема с навигационным меню. В моем навигационном меню есть подменю, которое раскрывается, чтобы открыть некоторые другие меню. Это работает. в режиме рабочего стола все в порядке, раскрывающиеся меню работают отлично, но как только я перехожу в режим просмотра для мобильных устройств, раскрывающееся меню перестает работать [code] [list] [*][url=index.html#hero]Home[/url] [*][url=index.html#about]About[/url] [*][url=index.html#features]Features[/url] [*][url=#]Services [i][/i][/url]
/** * Apply .scrolled class to the body as the page is scrolled down */ function toggleScrolled() { const selectBody = document.querySelector('body'); const selectHeader = document.querySelector('#header'); if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return; window.scrollY > 100 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled'); }
function closeModal() { document.getElementById('designModal').style.display = 'none'; }
// Close the modal when clicking outside of it window.onclick = function(event) { if (event.target == document.getElementById('designModal')) { closeModal(); } }
function navmenuScrollspy() { navmenulinks.forEach(navmenulink => { if (!navmenulink.hash) return; let section = document.querySelector(navmenulink.hash); if (!section) return; let position = window.scrollY + 200; if (position >= section.offsetTop && position link.classList.remove('active')); navmenulink.classList.add('active'); } else { navmenulink.classList.remove('active'); } }) } window.addEventListener('load', navmenuScrollspy); document.addEventListener('scroll', navmenuScrollspy);
})();
[/code] [Итак, в моем CSS-коде есть этот раздел. В этом разделе у меня есть две строки: «Видимость» и «Непрозрачность». Исходное: Видимость: скрыто Непрозрачность: 0 Новый код: Видимость: видимый Непрозрачность: 1 Изменение только этих двух строк фактически приводит к появлению окна, но выглядит странно](https://i.sstatic.net/nCMKW8PN.png)
Мобильная версия