jQuery Toggle函数无法关闭求助：控制台报toggle属性未定义错误

Hey there, let's figure out why your toggle isn't working and fix that error!

First, let's break down the error you're seeing: property 'toggle' of undefined at focusMobileSearch. That's happening because your reveal() function doesn't return a jQuery object (or any value at all, really)—it just runs some code to show elements. When you try to chain .toggle(...) onto it, you're essentially calling toggle() on undefined, which throws that error.

On top of that, your current code only handles the "open" state of the elements—there's no logic to actually close them, which is why the toggle won't work even if we fix the error.

Here's how to fix both issues:

Option 1: Fix the logic with direct CSS property control #

We'll rewrite the function to check the current state of your dropdown and either open or close it accordingly, and get rid of the broken reveal().toggle() chain:

function focusMobileSearch() {
  // Toggle the 'is-focused' class on mobile-search first
  $('.mobile-search').toggleClass('is-focused');
  
  // Cache our elements to avoid repeated DOM queries (better performance!)
  const $searchDropdown = $('.search-dropdown');
  const $inputGroup = $('.input-group');
  
  // Check if the dropdown is currently visible
  if ($searchDropdown.css('visibility') === 'visible') {
    // Close state: hide input first, then the dropdown
    $inputGroup.css('visibility', 'hidden');
    $searchDropdown.css({
      'visibility': 'hidden',
      'height': '0'
    });
  } else {
    // Open state: same as your original reveal logic
    $searchDropdown.css({
      'visibility': 'visible',
      'height': '64px'
    });
    $inputGroup.delay(200).queue(function(next) {
      $(this).css('visibility', 'visible');
      next();
    });
  }
}

Option 2: Use CSS classes for cleaner state management (recommended!) #

Instead of manipulating CSS properties directly, define classes to handle hidden/visible states. This makes your code easier to maintain and keeps styling in CSS where it belongs.

First, add these CSS classes:

.search-dropdown {
  /* Your existing styles here */
  transition: all 0.2s ease; /* Optional: add smooth transition for better UX */
}
.search-dropdown.hidden {
  visibility: hidden;
  height: 0;
}
.input-group.hidden {
  visibility: hidden;
}

Then update your JavaScript:

function focusMobileSearch() {
  const $mobileSearch = $('.mobile-search').toggleClass('is-focused');
  const $searchDropdown = $('.search-dropdown');
  const $inputGroup = $('.input-group');
  
  if ($mobileSearch.hasClass('is-focused')) {
    // Open: remove hidden classes
    $searchDropdown.removeClass('hidden');
    $inputGroup.delay(200).queue(function(next) {
      $(this).removeClass('hidden');
      next();
    });
  } else {
    // Close: add hidden classes (reverse the order of opening)
    $inputGroup.addClass('hidden');
    $searchDropdown.addClass('hidden');
  }
}

Key fixes explained: #

1. Removed the broken reveal().toggle() chain: Instead, we handle state checking directly in the main function, avoiding the undefined error.
2. Added close logic: We now check if elements are visible and reverse the open actions to properly close them.
3. Cached DOM elements: Reusing jQuery objects instead of querying the DOM multiple times boosts performance.
4. (Option 2) Separated styling from JS: Using CSS classes keeps your code organized and makes future styling changes simpler.

This should resolve both the error message and the toggle not closing issue!

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