避免使用导航栏切换按钮来关闭移动设备上打开的子菜单

Question

我有一个基于Bootstrap 3.3.7的代码
，我的菜单上有不同的菜单项和子菜单，我希望所有子菜单项都可以在移动设备上打开，这意味着无需单击任何菜单项即可显示其子菜单，所以我写了一个JS代码来打开手机上的所有子菜单：

function opensubmenus() {
  if ($(window).width() < 768) {
    $("#top-navbar-collapse li").addClass('open');
  } else {
    $("#top-navbar-collapse li").removeClass('open');
  }
}

$(window).resize(opensubmenus);
opensubmenus();

但是问题是，当我单击导航栏切换按钮时，它关闭了所有子菜单，但是我需要始终保持它们在移动设备上处于打开状态。您可以在以下网站上查看我的在线示例：https : //dedidata.com

在这里，我显示了屏幕截图：https : //pasteboard.co/IfSMCIu.jpg

我不喜欢完全禁用navbar-toggle按钮，我需要它来切换整个navbar，但是我不喜欢它关闭子菜单，我的JS代码打开了子菜单，但是navbar-toggle关闭了这些子菜单

Answer 1

该代码段将应用于所有下拉菜单，您可以对其进行修改以获取所需的下拉菜单。

我将解释它的作用：

const targets = document.getElementsByClassName('dropdown-toggle');

for(let i = 0; i < targets.length; i++) {
  targets[i].addEventListener('click', () => {
    targets[i].hasAttribute('data-toggle') &&
      targets[i].removeAttribute('data-toggle');

    // Managing locally the open and close
    targets[i].parentElement.classList.toggle('open');    
  });
}

第一行：

const targets = document.getElementsByClassName('dropdown-toggle');

我们得到所有具有类名称的元素dropdown-toggle（在boostrap中用于下拉菜单）

对于每个元素，click如果用户单击下拉菜单，我们将附加一个侦听器，以能够“手动”管理下拉菜单。

这是由行管理的： targets[i].parentElement.classList.toggle('open');

避免自动关闭菜单的重要方法之一就是删除属性data-toggle。

targets[i].hasAttribute('data-toggle') &&
          targets[i].removeAttribute('data-toggle');

如果您只有一个这样的解决方案适用于移动设备，则可以使用is.js来检查您何时使用移动设备（android / ios）

更新

此更新将自动打开菜单：

const menuItems = document.getElementsByClassName('navbar-toggle');

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].hasAttribute('data-toggle') && menuItems[i].addEventListener('click', () => {    
    const elements = document.getElementsByClassName('dropdown-toggle');
    for (let i = 0; i < elements.length; i++) {
      elements[i].hasAttribute('data-toggle') && elements[i].removeAttribute('data-toggle');      
      elements[i].parentElement.classList.add('open');
    }
  });
}

Answer 2

以下代码在单击时展开子菜单，并根据子菜单的打开/关闭状态navbar-toggle 将 更改为正确的值aria-expanded

function opensubmenus() {
    if ($(window).width() < 768) {
        $("#top-navbar-collapse li").addClass('open');
        $("#top-navbar-collapse li a").attr('aria-expanded','true');
    }else{
        $("#top-navbar-collapse li").removeClass('open');
        $("#top-navbar-collapse li a").attr('aria-expanded','false');
    }
}

$('#top-menu .navbar-toggle').click(function(){
    setTimeout(opensubmenus, 100);
});

$(window).resize(opensubmenus);
opensubmenus();

感谢@abelito 的提示