基于jQuery适配混合设备触摸事件及LED官网菜单触摸交互问题

Hey there, let's tackle this interactive menu issue for your LED panel sales site step by step. I've dealt with similar touch/mouse menu conflicts before, so here's a tailored solution that covers all your requirements:

First, let's align on what we need to solve:

• Touch devices: Tap parent menu to expand/collapse submenus (since hover doesn't work reliably here)
• Future-proof: Support double-tap on parent links to trigger navigation once href is added
• Hybrid devices (touch + mouse): Keep hover-to-expand functionality while also working with touch taps
• Avoid event conflicts: Properly detect touch events with jQuery without breaking mouse interactions

1. Base HTML & CSS (Assumed Structure) #

Let's start with a standard menu structure (adjust to match your site's markup):

<ul class="main-nav">
  <li class="nav-item has-submenu">
    <a class="parent-link" href="">Products</a> <!-- Empty href for now; will add later -->
    <ul class="submenu">
      <li><a href="/interactive-led-panels">Interactive LED Panels</a></li>
      <!-- Add other submenu items here -->
    </ul>
  </li>
  <!-- Other top-level menu items -->
</ul>

CSS to handle submenu visibility:

.submenu {
  display: none;
  position: absolute;
  /* Add your styling here (padding, background, etc.) */
}

/* Keep hover functionality for mouse users */
.has-submenu:hover .submenu {
  display: block;
}

/* Class to toggle submenu for touch users */
.has-submenu.active .submenu {
  display: block;
}

2. jQuery Implementation #

This code handles touch detection, single/double tap logic, and cross-device compatibility:

$(document).ready(function() {
  const $parentLinks = $('.parent-link');
  let tapTimer = null;
  const DOUBLE_TAP_THRESHOLD = 300; // Adjust double-tap sensitivity here (ms)

  // Detect if we're on a pure touch device (no mouse support)
  function isPureTouchDevice() {
    return 'ontouchstart' in window && !('onmouseover' in window);
  }

  const isPureTouch = isPureTouchDevice();

  $parentLinks.on('click touchstart', function(e) {
    const $link = $(this);
    const $parentItem = $link.closest('.has-submenu');
    const hasValidHref = $link.attr('href') && $link.attr('href') !== '';

    // Prevent default action (avoids empty href page reloads)
    e.preventDefault();

    // Handle double-tap for future navigation
    if (tapTimer) {
      clearTimeout(tapTimer);
      tapTimer = null;
      if (hasValidHref) {
        window.location.href = $link.attr('href');
      }
      return;
    }

    // Handle single-tap to toggle submenu
    tapTimer = setTimeout(function() {
      tapTimer = null;
      // Toggle submenu for pure touch devices OR touch events on hybrid devices
      if (isPureTouch || e.type === 'touchstart') {
        $parentItem.toggleClass('active');
        
        // Close submenu when clicking outside of it
        $(document).one('click touchstart', function(event) {
          if (!$parentItem.is(event.target) && !$parentItem.has(event.target).length) {
            $parentItem.removeClass('active');
          }
        });
      }
    }, DOUBLE_TAP_THRESHOLD);
  });

  // For hybrid devices: Remove active class when mouse leaves the menu item
  if (!isPureTouch) {
    $('.has-submenu').on('mouseleave', function() {
      $(this).removeClass('active');
    });
  }
});

3. Key Features Explained #

• Touch Device Detection: The isPureTouchDevice function ensures we don't break hover functionality for users with both touch and mouse inputs (like 2-in-1 laptops).
• Single/Double Tap Handling: Uses a timer to distinguish between single taps (toggle submenu) and double taps (trigger navigation once href is added).
• Outside Click Closure: Taps/clicks outside the active menu will collapse the submenu, improving UX on touch devices.
• Future-Proof: No need to rewrite code when you add href to parent links—double-tap will automatically trigger navigation.

• Test on pure touch devices (phones/tablets) to ensure single taps expand/collapse submenus correctly.
• Verify hybrid devices work with both hover and touch taps.
• Adjust DOUBLE_TAP_THRESHOLD if you need to make double-taps more or less sensitive.

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