Адаптивная панель навигации с раскрывающимися кнопками. ⇐ CSS

[Anonymous]

Проблема: в адаптивном режиме кнопка раскрывающегося списка не перемещается на видимую панель навигации от значка меню при нажатии любого из ее содержимого раскрывающегося списка.
Более подробно: в адаптивном режиме (ширина экрана менее 730 пикселей) панель навигации становится значком меню, и мне нужна любая или раскрывающаяся < /code> для перехода к видимой панели навигации при нажатии любого элемента раскрывающегося списка.
[img]https://i.sstatic .net/iV2TEMhj.png[/img]

Код находится по адресу https://codepen.io/Balazs-Keisz/pen/KKOmgQX
Вот код JavaScript, обрабатывающий панель навигации:
// Function to toggle responsive class for topnav when icon is clicked
function myFunctionIcon() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

// Function to clear all highlights
function clearAllHighlights() {
// Remove highlight from all nav items and buttons
document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
item.classList.remove('highlight-menu');
});
}

// Function to highlight the clicked button or link
function highlightButton(clickedElement) {
clearAllHighlights(); // Clear previous highlights
clickedElement.classList.add('highlight-menu'); // Highlight the clicked element

// If the clicked element is part of a dropdown, ensure only the dropdown button is highlighted
const dropdownButton = clickedElement.closest('.dropdown')?.querySelector('.dropbtn');
if (dropdownButton) {
dropdownButton.classList.add('highlight-menu'); // Highlight only the dropdown button
}
}

// Event listeners for nav items and dropbtns
document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
item.addEventListener('click', function(event) {
highlightButton(this); // Apply highlight
// Prevent closing the menu when clicking the dropdown button
if (this.classList.contains('dropbtn')) {
event.stopPropagation(); // Prevent event from bubbling up
}
});
});

// Event listener for each dropdown content link to close responsive menu
document.querySelectorAll('.dropdown-content a').forEach(link => {
link.addEventListener('click', function(event) {
const dropdownButton = this.closest('.dropdown').querySelector('.dropbtn');
highlightButton(dropdownButton); // Highlight only the dropdown button
if (window.innerWidth {
link.addEventListener('click', function() {
if (window.innerWidth {
button.addEventListener('click', function(event) {
// Prevent closing on the same dropdown click
event.stopPropagation();

// Get the corresponding dropdown content
var dropdownContent = this.nextElementSibling;

// Toggle the dropdown
toggleDropdown1(dropdownContent);
});
});

// Close the dropdown if the user clicks outside of any dropdown
window.addEventListener('click', function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn i')) {
closeAllDropdowns();
}
});

// Attach event listeners to all and elements for highlighting
document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
item.addEventListener('click', function() {
highlightButton(this); // Highlight the clicked element
});
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... wn-buttons