带下拉按钮的响应式导航栏问题：点击下拉项后按钮未移至可见栏

问题描述 #

在响应式视图（屏幕宽度小于730px）下，点击下拉内容中的任意项时，dropdown按钮不会从菜单图标切换到可见的导航栏中。

详细说明 #

当屏幕宽度小于730px时，导航栏变为菜单图标，期望点击任意<a>标签**或dropdown <button>**时，对应的元素能移动到可见的导航栏中。

导航栏处理的JavaScript代码 #

// 点击图标时切换topnav的响应式类
function myFunctionIcon() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

// 清除所有高亮状态
function clearAllHighlights() {
  // 移除所有导航项和按钮的高亮类
  document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
    item.classList.remove('highlight-menu');
  });
}

// 高亮点击的按钮或链接
function highlightButton(clickedElement) {
  clearAllHighlights(); // 清除之前的高亮
  clickedElement.classList.add('highlight-menu'); // 高亮当前点击元素
  
  // 如果点击元素属于下拉菜单，确保仅高亮下拉按钮
  const dropdownButton = clickedElement.closest('.dropdown')?.querySelector('.dropbtn');
  if (dropdownButton) {
    dropdownButton.classList.add('highlight-menu'); // 仅高亮下拉按钮
  }
}

// 为导航项和下拉按钮添加点击事件监听
document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
  item.addEventListener('click', function(event) {
    highlightButton(this); // 应用高亮
    // 点击下拉按钮时防止菜单关闭
    if (this.classList.contains('dropbtn')) {
      event.stopPropagation(); // 阻止事件冒泡
    }
  });
});

// 为下拉内容中的链接添加点击事件，关闭响应式菜单
document.querySelectorAll('.dropdown-content a').forEach(link => {
  link.addEventListener('click', function(event) {
    const dropdownButton = this.closest('.dropdown').querySelector('.dropbtn');
    highlightButton(dropdownButton); // 仅高亮下拉按钮
    if (window.innerWidth <= 729) {
      document.getElementById("myTopnav").classList.remove("responsive"); // 关闭响应式菜单
    }
  });
});

// 为其他响应式<a>链接添加点击事件，关闭菜单
document.querySelectorAll('.nav-item').forEach(link => {
  link.addEventListener('click', function() {
    if (window.innerWidth <= 729) {
      document.getElementById("myTopnav").classList.remove("responsive"); // 关闭响应式菜单
    }
  });
});

// 多下拉菜单的切换函数
function toggleDropdown1(dropdownId) {
  var dropdown = document.getElementById(dropdownId);
  dropdown.classList.toggle("show1");
}

// 关闭所有下拉菜单
function closeAllDropdowns() {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].classList.remove('show1');
  }
}

// 切换点击的下拉菜单
function toggleDropdown1(dropdownContent) {
  // 检查当前下拉菜单是否已展开
  var isOpen = dropdownContent.classList.contains('show1');
  
  // 关闭所有下拉菜单
  closeAllDropdowns();

  // 如果当前下拉菜单未展开，则展开它
  if (!isOpen) {
    dropdownContent.classList.add('show1');
  }
}

// 为每个下拉按钮添加点击事件监听
document.querySelectorAll('.dropbtn').forEach(button => {
  button.addEventListener('click', function(event) {
    // 点击同一下拉按钮时防止关闭
    event.stopPropagation();

    // 获取对应的下拉内容
    var dropdownContent = this.nextElementSibling;

    // 切换下拉菜单状态
    toggleDropdown1(dropdownContent);
  });
});

// 点击下拉菜单外部时关闭所有下拉菜单
window.addEventListener('click', function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn i')) {
    closeAllDropdowns();
  }
});

// 为所有<a>和<button>元素添加高亮事件监听
document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
  item.addEventListener('click', function() {
    highlightButton(this); // 高亮点击的元素
  });
});

内容的提问来源于stack exchange，提问作者Balazs Keisz