Bootstrap 3.3.7移动端：点击导航切换按钮保持子菜单展开

嘿，我懂你遇到的困扰——你写的JS已经能在窗口小于768px时展开所有子菜单，但一点击汉堡按钮（navbar-toggle），子菜单就会被收起，对吧？这是因为Bootstrap的导航栏折叠按钮触发了内置的折叠逻辑，会影响到open类的状态。

咱们只需要在现有代码基础上，加一段监听汉堡按钮点击的逻辑，确保点击后重新恢复子菜单的展开状态就行，同时完全保留按钮的整体导航栏切换功能。

修改后的完整代码如下：

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

// 初始化执行+窗口大小改变时触发状态切换
$(window).resize(opensubmenus); 
opensubmenus();

// 监听汉堡按钮点击，确保点击后子菜单保持展开
$('.navbar-toggle').on('click', function() {
  // 加100ms延迟，等Bootstrap的折叠动画完成后再操作，避免被内置逻辑覆盖
  setTimeout(function() { 
    if ($(window).width() < 768) {
      $("#top-navbar-collapse li").addClass('open');
    }
  }, 100);
});

关键说明： #

• 保留了你原来的opensubmenus函数，负责初始化和窗口resize时的状态切换
• 新增的navbar-toggle点击监听里加了setTimeout，是因为Bootstrap的折叠按钮点击后有动画过程，直接设置open类会被它的内置事件覆盖，延迟一小段时间就能完美避开这个问题
• 这样修改后，移动端下不管怎么点击汉堡按钮展开/收起整个导航栏，里面的子菜单始终都是展开状态，完全符合你的需求

内容的提问来源于stack exchange，提问作者Farhad Sakhaei