Bootstrap 4中两个下拉按钮代码不同却显示相同数据问题

嘿，我明白你遇到的糟心事了——第二个下拉按钮不管怎么配置，都跟第一个的内容一模一样，哪怕注释掉第二个列表都没用。这问题主要是两个小错误导致的：DOM标签嵌套混乱和下拉菜单与按钮的关联不匹配，咱们一步步把它修好：

1. 先搞定标签嵌套错误 #

你的代码里存在<li>标签闭合顺序错误的问题，比如第一个子菜单里多了一个多余的</li>，这会让浏览器解析DOM时彻底搞混结构，直接把第二个下拉菜单当成第一个的附属部分。正确的逻辑应该是：父<li>包裹子菜单<ul>，等子菜单写完再闭合父<li>。

2. 给下拉菜单和按钮做正确绑定 #

Bootstrap的下拉组件靠aria-labelledby属性来配对按钮和对应的菜单，你两个菜单的这个属性都写的是dropdownMenu，但按钮的id明明是quicklinkbtn和restrictedbtn，这就导致两个菜单都跟第一个按钮绑定了，第二个按钮自然只能调出第一个菜单的内容。咱们把每个菜单的aria-labelledby改成对应按钮的id就行。

修复后的完整代码 #

<div class="card text-center">
  <div class="card-body">
    <h4 class="card-title">Quick Links</h4>
    <p class="card-text">Select your quick link ticket through the drop down menu.</p>
    
    <!-- 第一个下拉按钮 -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="quicklinkbtn">
      Select Quick Link
    </button>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="quicklinkbtn">
      <li class="dropdown-submenu">
        <a class="dropdown-item" tabindex="-1" href="#">Location Name</a>
        <ul class="dropdown-menu">
          <li>
            <a data-toggle="tooltip" data-placement="top" title="Hover text overview of ticket type" class="dropdown-item menuLink" tabindex="-1" href="#">Link Name</a>
          </li>
        </ul>
      </li> <!-- 这里正确闭合父级li -->
    </ul>
    
    <!-- 第二个下拉按钮 -->
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="restrictedbtn">
      Restricted Quick Links
    </button>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="restrictedbtn">
      <li class="dropdown-submenu">
        <a class="dropdown-item" tabindex="-1" href="#">Location</a>
        <ul class="dropdown-menu">
          <li>
            <a data-toggle="tooltip" data-placement="top" title="Hover text for link" class="dropdown-item menuLink" tabindex="-1" href="#">Link Name 2</a>
          </li>
        </ul>
      </li> <!-- 正确闭合父级li -->
    </ul>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

验证修复效果 #

现在两个下拉按钮会各自触发对应的菜单：

• 点击「Select Quick Link」会显示包含「Link Name」的子菜单
• 点击「Restricted Quick Links」会显示包含「Link Name 2」的子菜单

之前你注释掉第二个列表还显示第一个内容，就是DOM结构错误导致浏览器把第二个按钮的下拉逻辑绑定到了第一个菜单上，现在修复后这个问题也会彻底解决。

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