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

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 按钮，我需要它来切换整个导航栏，但我不喜欢它关闭子菜单，我的 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');
    }
  });
}