如何实现链接首次点击返回false，再次点击返回true的交互效果？

Got it, let's get this menu working correctly for tablet devices. Your current code has a couple of logic snags that are blocking the desired behavior—let's break down the fixes step by step.

First, Fix the HTML Structure (Optional but Valid) #

Your original HTML puts <li> elements directly inside a <div>, which isn't valid HTML. List items should always be wrapped in a <ul> or <ol>:

<div id="nav">
  <ul>
    <li class="wsite-menu-item-wrap"><a href="/home">Home</a></li>
    <li class="wsite-menu-item-wrap"><a href="/about">About</a></li>
    <li class="wsite-menu-item-wrap"><a href="/contact">Contact</a></li>
  </ul>
</div>

Keep Your CSS as Is #

The show class styling works perfectly for highlighting active menu items—no changes needed here:

.show { 
  background: orange; 
  color: white; 
}

Corrected jQuery Code #

Your original script had two big issues: you returned false before adding the show class (so the class never got applied), and you checked all menu links for the class instead of just the one being clicked. We'll also add a tablet screen breakpoint to make sure this behavior only kicks in on smaller devices.

Here's the fixed code with comments explaining every part:

$(document).ready(function() {
  // Set your tablet breakpoint (adjust based on your design needs)
  const tabletBreakpoint = 768;

  // Handle menu link clicks
  $('#nav .wsite-menu-item-wrap a').on('click', function(e) {
    // Only run this logic on tablet-sized screens
    if ($(window).width() < tabletBreakpoint) {
      const $activeLink = $(this);

      // Check if the clicked link already has the "show" class
      if ($activeLink.hasClass('show')) {
        // If yes, let the link navigate to its URL
        return true;
      } else {
        // If no, add the "show" class and prevent default navigation
        $activeLink.addClass('show');
        e.preventDefault();
        return false;
      }
    }
    // For desktop screens, use the default hover behavior
    return true;
  });

  // Optional: Reset menu state if screen is resized to desktop
  $(window).on('resize', function() {
    if ($(window).width() >= tabletBreakpoint) {
      $('#nav .wsite-menu-item-wrap a').removeClass('show');
    }
  });
});

How This Works #

• First Tap: When you click/tap a menu link on a tablet, the show class is added, and the link won't navigate (we block the default action).
• Second Tap: If you tap the same link again, since it already has show, we let the link open its target URL.
• Desktop Fallback: On larger screens, the original hover behavior stays intact, and clicks immediately navigate as expected.
• Resize Safety: If you resize the browser from tablet to desktop, all show classes are removed to reset the menu to its default state.

Quick Extra Tip #

If your parent menu items have hidden submenus (which is why you need the show class), you can add a line to toggle the submenu's visibility too. For example, if your submenu is a sibling of the link, add:
$activeLink.next('.submenu').toggleClass('show')
right after adding the show class to the link.

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