Bootstrap侧边栏菜单JS交互问题及子菜单跳转需求

Hey there! Let's work through these sidebar problems step by step—you're already halfway there, just a few targeted tweaks will get everything working as expected.

1. Fix Selected State & Wedge Mark (Including Submenus) #

Your current code has a few mismatches with how the classes are structured:

• The active, open classes belong to the <li class="nav-item">, not the <a> tag
• The selected (wedge) and arrow spans should be toggled, not repeatedly appended (which causes duplicate elements)
• Submenu items need their own active state handling, while keeping parent menus expanded

First, update your HTML to include the selected span on all menu links (like the Dashboard item already has)—this avoids creating new spans every click:

<li class="nav-item ">
 <a href="{% url 'mainadmin:security' %}" class="nav-link nav-toggle">
  <i class="fa fa-users"></i>
  <span class="title">Security</span>
  <span class="selected"></span> <!-- Add this line -->
  <span class="arrow"></span>
 </a>
</li>

<!-- Do the same for submenu links if needed -->
<li class="nav-item ">
 <a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
  <span class="title">List All Messages</span>
  <span class="selected"></span> <!-- Add this line -->
 </a>
</li>

Then use this revised JavaScript to handle state toggling:

$(document).ready(function () {
  $('.page-sidebar-menu .nav-item a').click(function(e) {
    const $clickedLink = $(this);
    const $parentLi = $clickedLink.parent('.nav-item');
    const hasSubmenu = $parentLi.children('.sub-menu').length > 0;

    // 1. Reset all active states and hide wedges/arrows
    $('.nav-item').removeClass('active open');
    $('.selected').hide();
    $('.arrow').removeClass('open');

    // 2. Set active state for clicked item
    $parentLi.addClass('active');
    $clickedLink.find('.selected').show();

    // 3. Handle parent menus with submenus (toggle expansion)
    if (hasSubmenu) {
      $parentLi.addClass('open');
      $clickedLink.find('.arrow').addClass('open');
      e.preventDefault(); // Only block jump for toggle items
    }

    // 4. Keep parent menus expanded when clicking submenu items
    if ($parentLi.parents('.nav-item').length) {
      $parentLi.parents('.nav-item').addClass('active open');
      $parentLi.parents('.nav-item').find('.arrow').addClass('open');
    }
  });
});

2. Restore Page Navigation #

The original e.preventDefault() was blocking all link clicks. The code above fixes this by only calling e.preventDefault() for parent menu items that have submenus (since those are toggles, not direct links). Links without submenus will now navigate normally.

3. Add Styling for Background & Icon Color #

Add this CSS to your stylesheet to achieve the visual effects you want:

/* Active menu item background */
.page-sidebar-menu .nav-item.active > a {
  background-color: #0d47a1; /* Deep blue - adjust to your exact shade */
}

/* Active menu item icon color */
.page-sidebar-menu .nav-item.active > a i,
.page-sidebar-menu .nav-item.active .sub-menu .nav-item.active > a i {
  color: #81e6d9; /* Light green/teal - adjust to your exact shade */
}

/* Wedge mark styling (tweak position/color to match your design) */
.page-sidebar-menu .nav-item.active > a .selected {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 8px solid #ffffff; /* Match your sidebar's background color */
}

Quick Django Tip for Persistent Active State #

To keep the active menu item highlighted when the page loads (not just after clicking), add a template check to your HTML:

<li class="nav-item {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
 <a href="{% url 'mainadmin:dashboard' %}" class="nav-link nav-toggle">
  <i class="fa fa-tachometer"></i>
  <span class="title">Dashboard</span>
  <span class="selected"></span>
  <span class="arrow open"></span>
 </a>
</li>

This adds the active class server-side based on the current page URL.

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