点击自定义按钮打开移动端默认菜单抽屉问题求助

我给网站添加了一个仅在移动设备上可见的粘性底部菜单，完整代码如下：

<head>
      
    <style>
        /* Add some styling for the sticky section */
      .sticky-section {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f8f8f8;
        padding: 10px;
        text-align: center;
        z-index: 99;
        display: flex;
        height: 70px;
        justify-content: space-around;
    box-shadow: 0 0 10px rgba(0,0,0,.11);
          }
      
      .sticky-section-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f8f8f8;
        padding: 10px;
        text-align: center;
        z-index: 999;
        display: flex;
        height: 70px;
        justify-content: space-around;
    box-shadow: 0 0 10px rgba(0,0,0,.11);
          }
    
        /* Hide the sticky section on desktop screens */
        @media only screen and (min-width: 768px) {
        .sticky-section {
        display: none;
        }
        }
        /* styling for the links */
        .sticky-section-bar-nav-grid a {
        color: #000;
        text-decoration: none;
        margin: 10px;
        font-size: 1.3rem;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        }
        /* add font awesome icons */
      .sticky-section .fa {
        font-size: 1.6rem;
        }

    .sticky-section-bar-nav-grid{
        align-items: center;
        border-right: 1px solid #eee;
        display: flex;
        flex: 1 0 auto;
        justify-content: center;
        padding: 0px 20px;
        position: relative;
    }
        
    </style>
</head>
<body>

  <div class="sticky-section">
                <ul class="sticky-section-nav" style="background-color: #fff; border-color: #000">
                   <li class="sticky-section-bar-nav-grid">
                      <a class="sticky-section-icon-1" href="/home">
                        <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/home_1.png?v=1684754596" style="width: 20px;  ">
                            <span class="sticky-section-menu-title" style="display: block;color: #000;">Home</span>
                      </a>
                   </li>
                    <li class="sticky-section-bar-nav-grid">
                        <a class="sticky-section-icon-2" href="/collections/all">
                          <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/category.png?v=1684754597" style="width: 20px;  ">
                             <span class="sticky-section-menu-title" style="display: block;color: #000;">Categories</span>
                        </a>
                    </li>
                    <li class="sticky-section-bar-nav-grid">
                         <a class="sticky-section-icon-3" href="/cart">
                           <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/shopping-cart.png?v=1684754596" style="width: 20px;  ">
                              <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                         </a>
                    </li>
                    <li class="sticky-section-bar-nav-grid">
                           <a class="sticky-section-icon-4" href="/cart">
                             <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/user.png?v=1684754597" style="width: 20px;  ">
                                <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                           </a>
                    </li>
                </ul>
  </div>
    
</body>

我需要实现：点击菜单中的「分类」图标时，打开移动端默认的汉堡菜单抽屉（即点击汉堡图标弹出的菜单）。此前开发者提供的以下脚本在一个同主题、同代码的网站上生效，但在另一个网站上无效：

<script>
  setTimeout(function () {
       $(document).on("click", ".ad-menu-icon-1", function (e) {
          e.preventDefault()
          $('.menu-drawer-container .header__icon--menu').click();
      });
   }, 1500);
</script>

问题排查与解决方案 #

1. 核心问题：选择器不匹配

原脚本中的点击目标选择器.ad-menu-icon-1和底部菜单里分类图标的实际类名.sticky-section-icon-2完全不符，这是导致脚本失效的直接原因。

2. 优化脚本逻辑

去掉不必要的setTimeout延迟（依赖固定延迟容易因页面加载时序失效），改用DOM加载完成后绑定事件，同时增加选择器校验：

原生JS版本（无需jQuery）

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 绑定分类图标的点击事件
    const categoryLink = document.querySelector('.sticky-section-icon-2');
    if (categoryLink) {
        categoryLink.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认跳转至分类页
            // 触发汉堡菜单按钮点击
            const menuButton = document.querySelector('.menu-drawer-container .header__icon--menu');
            if (menuButton) {
                menuButton.click();
            } else {
                console.error('未找到汉堡菜单按钮，请检查选择器是否正确');
            }
        });
    } else {
        console.error('未找到底部菜单的分类图标');
    }
});
</script>

jQuery版本（如果网站依赖jQuery）

<script>
$(document).ready(function() {
    $(document).on('click', '.sticky-section-icon-2', function(e) {
        e.preventDefault();
        const $menuBtn = $('.menu-drawer-container .header__icon--menu');
        if ($menuBtn.length) {
            $menuBtn.click();
        } else {
            console.error('汉堡菜单按钮选择器错误，请核对元素类名');
        }
    });
});
</script>

3. 额外排查步骤

• 打开浏览器开发者工具（F12），切换到移动端视图，点击分类图标，查看控制台是否有报错信息
• 检查失效网站的汉堡菜单按钮实际类名：在开发者工具中选中汉堡图标，查看其class属性，替换脚本中的选择器
• 确保jQuery（如果使用jQuery版本脚本）在该脚本之前加载完成

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