移动端Chrome滚动后响应式网站导航切换按钮无响应问题

我来帮你搞定这个头疼的问题！这种情况在Chrome移动端很常见，主要是地址栏显示/隐藏触发的视口变化，加上你的事件绑定逻辑有小问题导致的，咱们一步步来修复：

先揪出核心问题 #

首先我注意到你的HTML按钮类名和JS配置不匹配！HTML里导航切换按钮的类是navbar-toggle，但JS默认配置里写的是classButtonToggle: 'toggle-menu'——这就导致JS根本找不到这个按钮，点击自然没反应！这大概率是主要原因之一。

另外，Chrome地址栏隐藏/显示会触发resize事件，你的代码每次resize都会重复绑定事件，导致同一元素绑定多个事件处理器，逻辑混乱，也会引发无响应的情况。

具体修复步骤 #

1. 修正类名匹配问题 #

把JS里的默认配置里的classButtonToggle改成和HTML一致的navbar-toggle：

optsDefault = {
  menuClass: 'dropdown-menu-list',
  breakpoint: 1000,
  toggleClass: 'active',
  classButtonToggle: 'navbar-toggle', // 这里改成HTML里的按钮类名
  subMenu: {
    class: 'sub-menu',
    parentClass: 'menu-item-has-children',
    toggleClass: 'active'
  }
}

2. 避免重复绑定事件 #

给元素添加初始化标记，防止每次resize都重复绑定事件，同时用事件命名空间来精准解绑，避免影响其他事件：

$.fn.dropdownMenu = function(opt) {
  return $(this).each(function() {
    var el = $(this),
        optsDefault = {
          menuClass: 'dropdown-menu-list',
          breakpoint: 1000,
          toggleClass: 'active',
          classButtonToggle: 'navbar-toggle', // 已修正类名
          subMenu: {
            class: 'sub-menu',
            parentClass: 'menu-item-has-children',
            toggleClass: 'active'
          }
        },
        options = $.extend({}, optsDefault, opt);

    // 标记是否已初始化，防止重复绑定
    if (el.data('dropdownMenuInit')) return;
    el.data('dropdownMenuInit', true);

    // 用命名空间绑定事件，方便后续精准解绑
    el.on('dropdownMenu', function() {
      $('.' + options.classButtonToggle, el).on('click.dropdownMenu', function(e) {
        e.stopPropagation();
        $('.' + options.menuClass, el).toggleClass(options.toggleClass);
      });

      $('.' + options.subMenu.parentClass, el).on('click.dropdownMenu', '> a', function(e) {
        e.preventDefault();
        var self = $(this);
        self.next('.' + options.subMenu.class).slideToggle(400);
        self.parent().toggleClass(options.subMenu.toggleClass);
      });

      $(document).on('click.dropdownMenu', function() {
        $('.' + options.menuClass, el).removeClass(options.toggleClass);
        $('.' + options.subMenu.parentClass, el).removeClass(options.subMenu.toggleClass);
        $('.' + options.subMenu.class, el).hide();
      });

      $('.' + options.menuClass).on('click.dropdownMenu', function(e) {
        e.stopPropagation();
      });
    });

    // 封装初始化逻辑，避免重复代码
    function handleMenuState() {
      if (window.innerWidth <= options.breakpoint) {
        if (!el.data('dropdownMenuActive')) {
          el.trigger('dropdownMenu');
          el.data('dropdownMenuActive', true);
        }
      } else {
        if (el.data('dropdownMenuActive')) {
          // 用命名空间解绑事件
          $('.' + options.classButtonToggle, el).off('click.dropdownMenu');
          $('.' + options.subMenu.parentClass, el).off('click.dropdownMenu', '> a');
          $(document).off('click.dropdownMenu');
          $('.' + options.menuClass).off('click.dropdownMenu');
          // 重置菜单状态
          $('.' + options.menuClass, el).removeClass(options.toggleClass);
          $('.' + options.subMenu.parentClass, el).removeClass(options.subMenu.toggleClass);
          $('.' + options.subMenu.class, el).hide();
          el.data('dropdownMenuActive', false);
        }
      }
    }

    // 页面加载时初始化
    handleMenuState();

    // 监听窗口resize
    $(window).resize(function() {
      handleMenuState();
    });
  });
};

3. 确保导航栏点击区域正常 #

检查你的固定导航栏CSS，地址栏变化会导致视口高度改变，可能让导航栏的点击区域偏移或被覆盖，给导航栏加这些样式：

.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* 确保导航栏在最上层，不会被其他元素挡住 */
  height: 60px; /* 固定高度，避免地址栏变化时高度跳动 */
}

测试验证 #

做完这些修改后，在Chrome移动端开发者工具里测试：

• 向上滚动隐藏地址栏，点击导航按钮，菜单应该正常展开
• 向下滚动显示地址栏，按钮依然能正常工作
• 调整窗口大小，菜单的响应式切换逻辑也能正确触发

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