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

我不喜欢完全禁用导航栏切换按钮，我需要它来切换整个导航栏，但我不喜欢它关闭子菜单，我的 JS 代码打开子菜单，但导航栏切换关闭那些子菜单

标签： javascriptjquerytwitter-bootstrap

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');
    }
  });
}