右侧显示的Subdropdown点击无响应问题求助（附代码）

Looks like you're hitting a few common snags with nested Bootstrap dropdowns. Let's break down what's off and fix it step by step:

Key Problems in Your Code #

• Duplicate IDs: You reused id="navbarDropdownMenuLink" for both the main dropdown toggle and the sub-toggle. IDs must be unique in HTML, so Bootstrap's JavaScript can't figure out which element to target.
• Missing Sub-Menu Container: Your Item1 toggle doesn't have a corresponding dropdown menu to display when clicked.
• No Right-Alignment Class: You haven't added the class needed to make the sub-menu align to the right side of its parent.
• Possible Bootstrap Version Mismatch: If you're using Bootstrap 5, you need to use data-bs-toggle instead of the older data-toggle attribute.

Corrected Code (Bootstrap 4) #

First, let's fix the HTML structure with unique IDs, proper nesting, and right alignment:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="mainDropdownLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Items</a>
  <div class="dropdown-menu shadow p-1 bg-white rounded" aria-labelledby="mainDropdownLink">
    <!-- Nested sub-dropdown container -->
    <div class="dropdown">
      <a class="dropdown-item dropdown-toggle" href="#" id="subDropdownLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item1</a>
      <!-- Right-aligned sub-menu -->
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="subDropdownLink">
        <a class="dropdown-item">Sub Item 1</a>
        <a class="dropdown-item">Sub Item 2</a>
        <a class="dropdown-item">Sub Item 3</a>
      </div>
    </div>
    <a class="dropdown-item">Item2</a>
    <a class="dropdown-item">Item3</a>
  </div>
</li>

Required Custom CSS (Bootstrap 4) #

Bootstrap 4 doesn't include built-in styling for nested dropdowns, so add this CSS to position the sub-menu correctly:

/* Position sub-dropdown to the right of its parent */
.dropdown-menu .dropdown-menu {
  margin-top: -1px;
  left: 100%;
  top: 0;
}

/* Ensure right-aligned submenu stays positioned correctly */
.dropdown-menu .dropdown-menu-right {
  right: 0;
  left: auto;
}

If You're Using Bootstrap 5 #

Adjust the data attributes to use Bootstrap 5's data-bs-* syntax, and take advantage of its built-in nested dropdown support:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="mainDropdownLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Items</a>
  <ul class="dropdown-menu shadow p-1 bg-white rounded" aria-labelledby="mainDropdownLink">
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#" id="subDropdownLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Item1</a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item">Sub Item 1</a></li>
        <li><a class="dropdown-item">Sub Item 2</a></li>
        <li><a class="dropdown-item">Sub Item 3</a></li>
      </ul>
    </li>
    <li><a class="dropdown-item">Item2</a></li>
    <li><a class="dropdown-item">Item3</a></li>
  </ul>
</li>

Note: Bootstrap 5 uses dropdown-menu-end for right alignment (instead of dropdown-menu-right) and the dropdown-submenu class for nested items.

Final Checks #

• Double-check that you've included the correct Bootstrap CSS and JavaScript files in your project (Bootstrap 4 also requires jQuery).
• Test the dropdowns after making these changes—they should now toggle properly when clicked!

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