token-web/js/mobNav.js

  // 检测是否为移动端
  function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }

// 如果是移动端且当前不是 mobile 页面，则重定向到移动端页面
// if (isMobile()) {
//   // 如果是移动端，将 xxx.html 替换为 xxx-mob.html
//   var currentPath = window.location.pathname;
//   if (currentPath.endsWith('.html') && !currentPath.includes('-mob.html')) {
//     var newPath = currentPath.replace(/\.html$/, '-mob.html');
//     window.location.href = newPath;
//   }
// } else {
//   // 如果是桌面端，将 xxx-mob.html 替换为 xxx.html
//   var currentPath = window.location.pathname;
//   if (currentPath.endsWith('-mob.html')) {
//     var newPath = currentPath.replace(/-mob\.html$/, '.html');
//     window.location.href = newPath;
//   }
// }

setTimeout(function () {
  isMobile() && toggleNav('close');
},1000);

function toggleNav(status) {
  $('.download-footer, .nav-links, .assets-banner, .sidenav').hide();
  $(".article-pc").addClass("article").removeClass("article-pc");
  $(".content-pc").addClass("content").removeClass("content-pc");
  var elements = document.getElementsByClassName('common-navbar-wrapper');
  if(status == 'open') {
    elements[0].innerHTML = `
      <header class="common-navbar-container">
        <div class="common-navbar">
          <div class="language-switcher" style="pointer-events: none;"><img class="language-icon" src="/images/footer/globe.svg">
            <p class="current-language">简体中文</p>
          </div>
          <div><img class="nav-icon" src="/images/header/close.svg"></div>
        </div>
        <div id="space" class=""></div>
        <div class="mobile-menu">
          <div class="flex-column button-groups"><a href="/pages/download.html"
              class="ant-btn ant-btn-primary ant-btn-block"><span>立即下载</span></a><a href="/pages/security.html"
              class="ant-btn light-btn ant-btn-primary ant-btn-block"><span>安全中心</span></a><a
              href="/pages/support.html"
              class="ant-btn light-btn ant-btn-primary ant-btn-block"><span>帮助中心</span></a><a href="/pages/blog.html"
              class="ant-btn light-btn ant-btn-primary ant-btn-block"><span>博 客</span></a></div>
          <ul class="ant-menu ant-menu-light ant-menu-root ant-menu-inline" role="menu" style="width: 256px;">
            <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
              <div class="ant-menu-submenu-title" aria-expanded="true" aria-haspopup="true" style="padding-left: 24px;"
                aria-owns="feature$Menu"><span>功能 </span><i class="ant-menu-submenu-arrow"></i></div>
              <ul id="feature$Menu" class="ant-menu ant-menu-sub ant-menu-hidden ant-menu-inline" role="menu" style="">
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/wallet.html">
                    <p class="item-title">多链钱包</p>
                  </a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a
                    href="/pages/hardwareWallets.html?locale=zh-CN">
                    <p class="item-title">硬件钱包</p>
                  </a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/DApp.html">
                    <p class="item-title">DApp 浏览器</p>
                  </a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/card.html">
                    <p class="item-title">imToken Card</p>
                  </a></li>
              </ul>
            </li>
            <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
              <div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;">
                <span>多链</span><i class="ant-menu-submenu-arrow"></i>
              </div>
              <ul id="assets$Menu" class="ant-menu ant-menu-sub ant-menu-hidden ant-menu-inline" role="menu" style="">
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/publicChain-menu-mob.html"><p class="item-title">公链</p></a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/arbitrumWallet-menu-mob.html"><p class="item-title">Layer2</p></a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/evm-menu-mob.html"><p class="item-title">EVM 兼容链</p></a></li>
              </ul>
            </li>
            <li class="ant-menu-item staking-menu-item" role="menuitem" style="padding-left: 24px;"><a href="/pages/staking.html">质押</a>
            </li>
            <li class="ant-menu-submenu ant-menu-submenu-inline"
              role="menuitem">
              <div class="ant-menu-submenu-title" aria-expanded="true" aria-haspopup="true" style="padding-left: 24px;"
                aria-owns="company$Menu"><span>公司</span><i class="ant-menu-submenu-arrow"></i></div>
              <ul id="company$Menu" class="ant-menu ant-menu-sub ant-menu-hidden ant-menu-inline" role="menu" style="">
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/about.html">关于我们</a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a
                    href="/pages/careers.html">加入我们</a></li>
              </ul>
            </li>
            <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
              <div class="ant-menu-submenu-title" aria-expanded="true" aria-haspopup="true" style="padding-left: 24px;"
                aria-owns="resource$Menu"><span>资源</span><i class="ant-menu-submenu-arrow"></i></div>
              <ul id="resource$Menu" class="ant-menu ant-menu-sub ant-menu-hidden ant-menu-inline" role="menu" style="">
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/docs.html"
                    target="_blank">API</a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a>提交代币</a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/brand.html" target="_blank">品牌</a>
                </li>
              </ul>
            </li>
            <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
              <div class="ant-menu-submenu-title" aria-expanded="true" aria-haspopup="true" style="padding-left: 24px;"
                aria-owns="support$Menu"><span>帮助中心</span><i class="ant-menu-submenu-arrow"></i></div>
              <ul id="support$Menu" class="ant-menu ant-menu-sub ant-menu-hidden ant-menu-inline" role="menu" style="">
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a
                    href="/pages/support.html" target="_blank">帮助中心</a></li>
                <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/faq.html">常见问题</a></li>
              </ul>
            </li>
          </ul>
          <div class="links-item subscribe-item" style="pointer-events: none;">
            <form class="subscribe"
              action="https://d0a5ba0b.sibforms.com/serve/MUIEAEz3dQk0fDrweVnmTpQQbZ2rw7qQ0gwoG6uu7cmDs0Qbh-IH9n_9vnkOQcAbKkvvwJN3s6pdlocND15cgu8iWZpPKmLHrRotNy0Y7OWZCbE6s_ufjQdZ1gF97q8wMCufNErgiw-O2ZXG15IuswkxLv9-ibQzyNEr6vAKCXMI0DSy_0nRpnTgnUV27alZPD76WvkNNHW5Ylmh"
              method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"><input
                class="subscribe-input" type="email" name="EMAIL" id="mce-EMAIL" placeholder="[email protected]" required=""><img
                class="subscribe-icon" src="/images/footer/subscribe.svg" alt="Subscribe button"><input
                class="subscribe-submit" type="submit"></form><span>及时获取 imToken 最新资讯</span>
          </div>
        </div>
      </header>
    `;
                // <li class="ant-menu-item" role="menuitem" style="padding-left: 48px;"><a href="/pages/contact.html">联系我们</a></li>
    $(document).ready(function() {
      // 监听 ant-menu 下的 li 元素点击事件
      $('.ant-menu li').on('click', function(e) {
        // 阻止事件冒泡（避免触发父菜单的点击事件）
        e.stopPropagation();

        // 获取当前点击的 li 元素
        const $li = $(this);

        // 1. 切换 ant-menu-submenu-open 类（控制展开/折叠样式）
        $li.toggleClass('ant-menu-submenu-open');

        // 2. 查找当前 li 下的子菜单（ant-menu），并切换 ant-menu-hidden
        const $subMenu = $li.find('> .ant-menu');
        if ($subMenu.length) {
          $subMenu.toggleClass('ant-menu-hidden');
        }
      });
    });
    $(document).ready(function() {
      $('.common-navbar img').on('click', function() {
        toggleNav('close');
      });
    });
  }else{
    elements[0].innerHTML = `
      <header class="common-navbar-container">
        <div class="common-navbar"><a href="/"><img class="navbar-logo" src="/img/imTokenLogo.svg" alt="imToken Logo"></a>
          <div><a id="mobile-download" href="/pages/download.html" class="ant-btn ant-btn-primary"
              style="margin-right: 20px; display: none;"><span>立即下载</span></a><img class="nav-icon" src="/images/header/menu.svg"></div>
        </div>
        <div id="space"></div>
      </header>
    `;
    $(document).ready(function() {
      $('.common-navbar img').on('click', function() {
        toggleNav('open')
      });
    });
  }
}