jQuery实现为含子菜单的各级菜单添加图标问题

Got it, let's get this sorted—you want every menu item (whether it's a top-level parent, a child menu with its own submenu, or even deeper levels) to show that bars icon. The problem with your current code is almost certainly that it's only targeting top-level parent items, not the nested ones that also have submenus. Here are two solid solutions depending on your browser support needs:

Solution 1: Modern CSS (Cleanest, Works in New Browsers) #

If you don't need to support super old browsers (like pre-2022 Chrome/Firefox), use the :has() selector—it's perfect for this because it lets you target any <li> that directly contains a submenu <ul>, no matter how deep it is.

First, here's a sample nested menu structure to reference:

<nav class="main-menu">
  <ul>
    <li>
      Top-Level Menu 1
      <ul>
        <li>Child Item 1</li>
        <li>
          Child Item 2 (Has Submenu)
          <ul>
            <li>Grandchild Item 1</li>
            <li>Grandchild Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      Top-Level Menu 2
      <ul>
        <li>Child Item 3</li>
      </ul>
    </li>
  </ul>
</nav>

Now add this CSS to inject the bars icon automatically:

/* Give space for the icon and position it */
.main-menu li:has(> ul) {
  position: relative;
  padding-right: 25px; /* Adjust based on your icon size */
}

/* Add the bars icon using a pseudo-element (no extra HTML needed) */
.main-menu li:has(> ul)::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* Pure CSS bars icon (three horizontal lines) */
  width: 16px;
  height: 12px;
  background-image: 
    linear-gradient(#333 2px, transparent 2px),
    linear-gradient(#333 2px, transparent 2px),
    linear-gradient(#333 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0, 0 5px, 0 10px;
}

This will target every <li> (top-level, child, grandchild, etc.) that has a direct submenu <ul> and add the bars icon to it.

Solution 2: JavaScript (For Older Browser Support) #

If you need to support browsers that don't recognize :has() (like older Safari or Firefox versions), use JavaScript to loop through all menu items and add the icon only to those with submenus.

Add this script after your menu HTML:

// Grab all list items in your menu
const allMenuItems = document.querySelectorAll('.main-menu li');

allMenuItems.forEach(item => {
  // Check if the current li has a DIRECT submenu (not a nested one further down)
  const hasDirectSubmenu = item.querySelector(':scope > ul');
  
  if (hasDirectSubmenu) {
    // Create the icon element
    const barsIcon = document.createElement('span');
    barsIcon.classList.add('bars-icon');
    
    // Add the icon to the menu item
    item.appendChild(barsIcon);
  }
});

Then add this CSS to style the icon:

.bars-icon {
  display: inline-block;
  margin-left: 8px;
  width: 16px;
  height: 12px;
  /* Same pure CSS bars icon as before */
  background-image: 
    linear-gradient(#333 2px, transparent 2px),
    linear-gradient(#333 2px, transparent 2px),
    linear-gradient(#333 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0, 0 5px, 0 10px;
  vertical-align: middle;
}

The :scope selector ensures we only check for direct child <ul> elements, so we don't accidentally add icons to items that just have nested submenus further down their tree.

Either way, this will make sure every menu item with a submenu—no matter how deep in the hierarchy—gets that bars icon you need.

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