使用Bootstrap和jQuery实现导航栏active类切换问题求助

Got it, let's tackle this issue you're facing. Right now, your code adds the active class when clicking a nav link, but it doesn't account for when you click an already active link to close its collapse panel—leaving the active class stuck. Here's how to fix it:

The Core Problem #

Your current jQuery only handles switching the active class between different links, but it doesn't check if the clicked link is already active and if its collapse panel is open (so clicking it will close the panel). We need to add that logic, plus sync with Bootstrap's collapse events for better robustness.

Solution 1: Robust Sync with Bootstrap Collapse Events #

This version handles both nav link clicks and cases where the collapse panel is closed through other means (like a close button inside the panel):

// Handle nav link clicks
$('ul.nav li a').click(function () {
  const $link = $(this);
  const $targetCollapse = $($link.data('target'));
  const $parentLi = $link.parent('li');

  if ($parentLi.hasClass('active') && $targetCollapse.hasClass('show')) {
    // If link is active and panel is open, clicking closes it—remove active class
    $parentLi.removeClass('active');
  } else {
    // Otherwise, switch active state to this link
    $('ul.nav li.active').removeClass('active');
    $parentLi.addClass('active');
  }
});

// Sync active class when collapse panel is hidden (any method)
$('.collapse').on('hide.bs.collapse', function () {
  const targetId = `#${$(this).attr('id')}`;
  $(`ul.nav li a[data-target="${targetId}"]`).parent('li').removeClass('active');
});

// Sync active class when collapse panel is shown (any method)
$('.collapse').on('show.bs.collapse', function () {
  const targetId = `#${$(this).attr('id')}`;
  $('ul.nav li.active').removeClass('active');
  $(`ul.nav li a[data-target="${targetId}"]`).parent('li').addClass('active');
});

Solution 2: Simplified (Nav Link Clicks Only) #

If you only need to handle clicks directly on the nav links, this shorter version gets the job done:

$('ul.nav li a').click(function () {
  const $parentLi = $(this).parent('li');
  const $collapsePanel = $($(this).data('target'));

  if ($parentLi.hasClass('active')) {
    // Only remove active if the panel is currently open (will close on click)
    if ($collapsePanel.hasClass('show')) {
      $parentLi.removeClass('active');
    }
  } else {
    // Switch active state to this link
    $('ul.nav li.active').removeClass('active');
    $parentLi.addClass('active');
  }
});

How It Works #

• Bootstrap adds the show class to a collapse panel when it's expanded, so we use that class to check the panel's current state.
• When clicking an active link, if the panel is open, we know clicking it will close the panel—so we remove the active class along with it.
• The first solution adds listeners for Bootstrap's built-in hide.bs.collapse and show.bs.collapse events, ensuring the nav's active state stays in sync no matter how the panel is opened or closed.

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