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 代码打开子菜单，但导航栏切换关闭那些子菜单

Answer 1

这个sn-p会应用到所有的下拉菜单，你可以修改它以获得你需要的下拉菜单。

我会解释它的作用：

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 的提示

Answer 3

修改 10 分钟后的直码。我绝对不建议将其作为最终答案，但这将使您走上实现它的一种方式：

function delayedSubmenuOpen() { setTimeout(openAllSubmenus, 100); }

function openAllSubmenus() {
    var eles = document.getElementsByClassName("dropdown-toggle");
    for (i = 0; i < eles.length; i++) { 
        eles.item(i).parentElement.className += " open";
    }
}

var navigationHamburger = document.getElementsByClassName("navbar-toggle").item(0);
navigationHamburger.addEventListener("click", delayedSubmenuOpen);

我肯定会用跨浏览器兼容的 jQuery 调用来替换所有这些，因为我是在直接的 javascript 中完成的，并且只在我的 Chrome 浏览器中进行了测试。

我也会考虑只编辑 CSS 而不是依赖 javascript 来执行此操作 - 也许在页面加载时，制作“.open”类的重命名副本并将其添加到所有具有类名的元素“ menu-item-has-children”——这样它就不能被 javascript 关闭。听起来你可能已经尝试过了，但绝对值得研究，而不是依赖于一些 hokey JS。

Answer 4

将此添加到您的 css

@media only screen and (max-width: 768px) {
    .megamenu .dropdown ul.dropdown-menu {
        display: block;
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-fixed-top .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.7)!important;
    }

}

然后把函数改成这样

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

jQuery(window).resize(opensubmenus);
opensubmenus();