jQuery多级菜单返回按钮问题：生成多个返回按钮元素

Hey there! Let's work through this mobile menu quirk you're hitting. Your intended logic makes total sense, but unexpected behavior when clicking the first parent <li> almost always ties back to event handling missteps, overbroad DOM targeting, or duplicate element creation. Let's break down fixes for the most common culprits:

1. Stop Event Bubbling from Messing with Parent Elements #

If your click events are bubbling up to higher-level elements, clicking the first <li> might trigger unintended actions (like toggling the main menu again). Fix this by narrowing your event targets and stopping propagation:

// Bind only to direct child li elements of your main menu
$('.main-menu > li').on('click', function(e) {
  e.stopPropagation(); // Prevent this click from triggering parent menu events
  
  // Toggle the immediate child ul (not all nested ones)
  $(this).children('ul').toggle();
  
  // Add/remove the "more" span only if this li has a direct child ul
  if ($(this).children('ul').length) {
    $(this).find('.more').toggle();
  }
});

2. Avoid Duplicate "Back" Buttons & Wrong Container Targeting #

When clicking "more" to show the third-level menu, it's easy to accidentally create multiple back buttons or append them to the wrong place. Add a check to ensure you only create one button per menu:

$('.more').on('click', function(e) {
  e.stopPropagation(); // Don't trigger the parent li's click event
  
  const $thirdLevelMenu = $(this).siblings('ul');
  $thirdLevelMenu.show();
  
  // Only create the back button if it doesn't already exist
  if (!$thirdLevelMenu.find('.back-btn').length) {
    const $backBtn = $('<button class="back-btn">返回</button>');
    $thirdLevelMenu.prepend($backBtn);
    
    // Bind the back button action
    $backBtn.on('click', function() {
      $thirdLevelMenu.hide();
    });
  }
});

3. Lock Down Initial CSS States #

Make sure all nested menus are hidden by default, so you don't get unexpected visible content on load:

/* Hide all nested menus initially */
.main-menu ul, .main-menu ul ul {
  display: none;
  list-style: none;
  padding-left: 1.2rem;
}

/* Style the "more" indicator */
.more {
  margin-left: 0.6rem;
  color: #2563eb;
  cursor: pointer;
  font-size: 0.9rem;
}

.back-btn {
  margin-bottom: 0.8rem;
  padding: 0.4rem 0.8rem;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
}

4. Verify Consistent HTML Structure #

Double-check that your first parent <li> has the same structure as others—extra nested elements or missing classes can throw off your jQuery selectors. Example clean structure:

<button class="open-btn">Open</button>
<ul class="main-menu" style="display: none;">
  <li>
    Parent Menu 1
    <span class="more">more</span>
    <ul>
      <li>Child Menu 1-1
        <ul>
          <li>Level 3 Item 1</li>
          <li>Level 3 Item 2</li>
        </ul>
      </li>
      <li>Child Menu 1-2</li>
    </ul>
  </li>
  <li>
    Parent Menu 2
    <ul>
      <li>Child Menu 2-1</li>
    </ul>
  </li>
</ul>

Start with checking event propagation and duplicate element creation—those are the most likely causes of weird behavior with the first parent menu item. Let me know if you still hit snags after testing these fixes!

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